Switch
Toggle switch for binary on/off controls. Supports 3 sizes, 5 color themes, optional labels with configurable position, and smooth spring-animated thumb transitions powered by Framer Motion.
Live Preview
Interact with the Switch component in real time. Adjust size, color, label position, and disabled state to see changes instantly.
1<Switch2checked={true}3size="md"4color="primary"5labelPosition="right"6label="Enable notifications"7onChange={(checked) => setChecked(checked)}8/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Switch component into your file.
import { Switch } from '@/components/aidash/switch';Basic Usage
The simplest way to use a Switch with controlled state.
1const [checked, setChecked] = useState(false);2 3<Switch4checked={checked}5onChange={setChecked}6label="Dark mode"7/>Sizes
Three sizes to fit different layout contexts.
1<Switch checked size="sm" label="Small" />2<Switch checked size="md" label="Medium" />3<Switch checked size="lg" label="Large" />Colors
Five color themes for different semantic contexts.
1<Switch checked color="primary" label="Primary" />2<Switch checked color="accent" label="Accent" />3<Switch checked color="success" label="Success" />4<Switch checked color="warning" label="Warning" />5<Switch checked color="error" label="Error" />With Label
Place the label on the left or right side of the switch.
1<Switch checked labelPosition="right" label="Label on right" />2<Switch checked labelPosition="left" label="Label on left" />Disabled State
Disabled switches are dimmed and non-interactive.
1<Switch disabled label="Off disabled" />2<Switch checked disabled label="On disabled" />Controlled
Manage the switch state externally and display the current value.
Auto-save is currently disabled
1const [autoSave, setAutoSave] = useState(false);2 3<Switch4checked={autoSave}5onChange={setAutoSave}6color="success"7label="Auto-save"8/>9<p>10Auto-save is currently{' '}11<span>{autoSave ? 'enabled' : 'disabled'}</span>12</p>Accessibility
Built-in ARIA attributes and roles for assistive technology.
role="switch"
The toggle button uses role="switch" to communicate its purpose to screen readers.
aria-checked
Reflects the current state with aria-checked="true" or "false".
Keyboard Navigation
Tab to focus the switch, Space or Enter to toggle. Disabled switches are skipped from the tab order.
Label Association
When a label is provided, the switch is wrapped in a <label> element for a larger clickable target area.
1{/* Switch with ARIA role="switch" */}2<Switch3checked={isEnabled}4onChange={setIsEnabled}5label="Enable feature"6/>7{/* Renders: <button role="switch" aria-checked="true"> */}API Reference
Complete list of props for the Switch component.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Whether the switch is on |
| onChange | (checked: boolean) => void | — | Callback fired when the switch is toggled |
| disabled | boolean | false | Disable interaction and dim the switch |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the switch track and thumb |
| color | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'primary' | Color theme when the switch is on |
| label | string | — | Text displayed next to the switch |
| labelPosition | 'left' | 'right' | 'right' | Position of the label relative to the switch |
| className | string | '' | Additional CSS classes |
checked and onChange props to manage state.Related
Other components that work well alongside Switch.