forms
Switch
States
Import
import { Switch } from '@connor-adams/designsystem'Usage
A pill toggle for on/off settings (notifications, auto-reconcile) — oxblood when on. Use over Checkbox for instant-apply settings, not form submission.
<Switch checked={autoReconcile} onCheckedChange={setAutoReconcile} />
Variants: size="sm" for dense setting rows. disabled. Uncontrolled with defaultChecked.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | undefined | — | |
| defaultChecked | boolean | undefined | — | |
| onCheckedChange | ((checked: boolean) => void) | undefined | — | |
| size | "sm" | "default" | undefined | default |