Switch
Use Switch for binary on/off settings and immediate state changes.
Interactive Example
With Helper Text and Sizes
API reference
SwitchProps
checkedboolean—
Name: checked
Description: Controlled checked state.
Type: boolean
Default: —
defaultCheckedbooleanfalse
Name: defaultChecked
Description: Initial state for uncontrolled usage.
Type: boolean
Default: false
onChange(checked: boolean, event: MouseEvent | KeyboardEvent) => void—
Name: onChange
Description: Callback fired when the switch state changes.
Type: (checked: boolean, event: MouseEvent | KeyboardEvent) => void
Default: —
labelstring—
Name: label
Description: Visible label text associated with the switch.
Type: string
Default: —
labelPosition'start' | 'end''end'
Name: labelPosition
Description: Position of label relative to the switch toggle.
Type: 'start' | 'end'
Default: 'end'
size'sm' | 'md' | 'lg''md'
Name: size
Description: Size of the switch control.
Type: 'sm' | 'md' | 'lg'
Default: 'md'
disabledbooleanfalse
Name: disabled
Description: Disables user interaction and dims the control.
Type: boolean
Default: false
errorstring—
Name: error
Description: Validation error message associated via aria-describedby.
Type: string
Default: —
helperTextstring—
Name: helperText
Description: Supplementary helper text associated via aria-describedby.
Type: string
Default: —
namestring—
Name: name
Description: Field name for hidden input during standard HTML form submission.
Type: string
Default: —
valuestring'on'
Name: value
Description: Field value for hidden input during form submission.
Type: string
Default: 'on'
Accessibility
- WCAG 1.3.1: Label and switch are properly associated via
htmlForandid. - WCAG 1.4.1: Switch state does not rely on color alone; thumb physical translation provides clear visual distinction.
- WCAG 1.4.3 & 1.4.11: Exceeds 3:1 minimum contrast for user interface boundaries and track states.
- WCAG 2.1.1: Full keyboard navigation supporting both Space and Enter toggles.
- WCAG 2.4.7: High-visibility focus indicator with contrast fallback for dark and high-contrast modes.
- WCAG 2.5.8: Minimum target size complies with mobile pointer requirements via hit-target expansion.
- WCAG 4.1.2: Uses
role="switch"and dynamicaria-checkedstate announcements.