Switch API
View componentThe full prop reference for the Switch component. A control that allows the user to toggle between checked and not checked.
Import
import { Switch } from '@structyl/styled';Props
Switch
Accessible switch/toggle component with controlled and uncontrolled modes, styled with Tailwind variants for size and color.
| Prop | Type | Default |
|---|---|---|
| checked# | booleanControlled checked state of the switch | — |
| defaultChecked# | booleanInitial checked state (uncontrolled mode) | — |
| onCheckedChange# | (checked: boolean) => voidCallback fired when the checked state changes | — |
| disabled# | booleanWhen true, the switch is disabled and cannot be toggled | — |
| required# | booleanWhen true, indicates the switch is required in a form | — |
| name# | stringForm name attribute; creates a hidden input for form submission | — |
| value# | stringForm value when the switch is checked | 'on' |
| asChild# | booleanRender as child (Slot pattern); merges props onto the first child element | — |
| size# | 'sm' | 'md' | 'lg'Switch size variant (styled layer) | 'md' |
| color# | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'Switch color variant when checked (styled layer) | 'primary' |
| className# | stringCSS class names merged with variant styles | — |
| onClick# | (event: React.MouseEvent<HTMLButtonElement>) => voidNative click handler (merged with toggle logic) | — |
| ref# | React.Ref<HTMLButtonElement>Forward ref to the underlying button element | — |
Keyboard interactions
Adheres to the WAI-ARIA design pattern .
| Key | Description |
|---|---|
| Space / Enter | Toggles the switch. |
Source code
If you didn't find what you need here, read the component implementation .