Switch
- Layer: Component
- Base:
@ark-ui/solid/switch+ custom styling
States
Section titled “States”On · off · disabled
| State | Visual |
|---|---|
| Off | 40×22 pill, --colors-bg-muted fill, --colors-border border. Thumb sits left, --colors-text-secondary. |
| On | --colors-accent-dim fill, --colors-accent-default border. Thumb translated 18px right, --colors-accent-default. |
| Disabled | Same geometry, opacity: 0.4, cursor not-allowed. |
| Focus-visible | Cyan focus ring via --shadows-focus. |
Plane 1 Constraints
Section titled “Plane 1 Constraints”No drop shadows, no glow. Selection is signified by the --colors-accent-default fill on the thumb and --colors-accent-dim background on the track.
Accessibility
Section titled “Accessibility”Wraps @ark-ui/solid/switch, which manages role="switch", aria-checked (true/false), keyboard activation (Space), and a hidden native input for form submission. The DS adds the visual layer only. Pass an explicit aria-label when the switch ships without a visible label.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state |
onCheckedChange | (details: { checked: boolean }) => void | — | Change handler |
disabled | boolean | false | Disables interaction |
children | JSX.Element | — | Optional label, rendered to the right |
aria-label | string | — | Required when no visible children label. |