AI Toggle

Toggle switch component for the ActiveIntelligence product area.

Overview

Resources

Install

yarn add @camp/ai-toggle

Variations

Default toggle

A standard toggle switch with label positioned on the right side.

import { AiToggle } from '@camp/ai-toggle';
 
<AiToggle label="Toggle" />;

Left label toggle

Toggle with label positioned on the left side for better visual hierarchy.

import { AiToggle } from '@camp/ai-toggle';
 
<AiToggle label="Toggle" labelPosition="left" />;

Disabled toggle

Toggle in a disabled state, preventing user interaction.

import { AiToggle } from '@camp/ai-toggle';
 
<AiToggle label="Toggle" disabled />;

Toggle with aria-label

Toggle without visible label, using aria-label for accessibility.

import { AiToggle } from '@camp/ai-toggle';
 
<AiToggle ariaLabel="Toggle" />;

Usage

Best practices

• Use clear, descriptive labels that explain what the toggle controls
• Position labels consistently throughout your interface
• Provide immediate visual feedback when toggles change state
• Use disabled state sparingly and provide clear explanation when needed
• Group related toggles together with clear section headings

Content guidelines

Accessibility

Keyboard support

• Tab: Navigate to the toggle
• Space or Enter: Toggle the switch on/off
• Escape: Return focus to the previous element (when applicable)

Screen reader support

• The toggle uses proper ARIA attributes for screen reader compatibility
• When using ariaLabel, ensure it clearly describes the toggle’s purpose
• The component automatically manages focus states and announcements