AI Toggle

Toggle switch component for the ActiveIntelligence product area.

Overview

Resources

Install

yarn add @camp/ai-toggle

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the toggle is checked.
`onClick`	`(checked: boolean) => void`	—	The callback function for when the toggle is checked.
`ariaLabel`	`string`	—	The aria-label for the toggle - only needed if the toggle is standalone.
`style` †	`CSSProperties`	—
`disabled`	`boolean`	`false`	Whether the toggle is disabled.
`description`	`string`	—	Optional description text displayed below the label (only supported with label on left).
`label`	`string`	—	The label for the toggle.
`labelPosition`	`"right" \| "left"`	—	The position of the label.

Generated from @camp/ai-toggle@11.7.2 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

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" />;

Production Examples

More states from @camp/ai-toggle's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Checked Disabled

import { AiToggle } from '@camp/ai-toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<AiToggle {...defaultArgs} checked disabled />

Checked

import { AiToggle } from '@camp/ai-toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<AiToggle {...defaultArgs} checked />

With Description Checked

import { AiToggle } from '@camp/ai-toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<AiToggle
  {...defaultArgs}
  labelPosition="right"
  checked
  description="This is a helpful description that provides more context about the toggle option."
/>

With Description Disabled

import { AiToggle } from '@camp/ai-toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<AiToggle
  {...defaultArgs}
  labelPosition="right"
  disabled
  description="This is a helpful description that provides more context about the toggle option."
/>

With Description

import { AiToggle } from '@camp/ai-toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<AiToggle
  {...defaultArgs}
  labelPosition="right"
  description="This is a helpful description that provides more context about the toggle option."
/>

Label Position Right

import { AiToggle } from '@camp/ai-toggle';
 
const defaultArgs = {
  label: 'Toggle',
};
 
<AiToggle {...defaultArgs} labelPosition="right" />

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

✅ DO

Use clear, action-oriented labels like "Enable notifications" or "Dark mode"
Position labels consistently throughout your interface
Provide immediate visual feedback when toggles change

🚫 DON’T

Use vague labels like "Option" or "Setting"
Mix label positions without clear reasoning
Leave users uncertain about toggle state changes

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)

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