Documentation
Asgard
Getting started
Theming
Guides
Inputs & forms
Pickers
Data display
Layout & docking
Feedback & overlays
Navigation & chrome
Inputs & forms
Flip a setting on or off, instantly.
Switch is a toggle component offering three distinct visual styles that mimic Material UI, iOS, and Android designs.
Key features:
- Three
switchStyleoptions:mui,ios,android SwitchGroupfor consistent layout of multiple switches- Semantic coloring and configurable
labelPosition - Three sizes with disabled state support
Loading preview…
When to use it
- Settings and preference toggles
- Enabling or disabling a feature live
- Row-level on/off in a settings list
- Platform-styled toggles (iOS / Android / MUI)
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Whether the switch is currently toggled on. |
onChange | (checked: boolean) => void | — | Callback fired when the switch is toggled. The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value). |
label | string | — | Text label displayed next to the switch. |
size | 'small' | 'normal' | 'large' | 'normal' | Controls the overall size of the switch. |
type | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | — | Semantic color type applied to the switch. |
switchStyle | 'mui' | 'ios' | 'android' | 'mui' | Visual style of the switch track and thumb. |
disabled | boolean | false | Disables the switch, preventing user interaction. |
labelPosition | 'left' | 'right' | 'right' | Controls whether the label appears to the left or right of the switch. |
Notes
- The three switchStyle options (mui, ios, android) each provide a distinct visual appearance mimicking their respective platform toggles.
- SwitchGroup provides consistent spacing and layout for multiple switches but does not manage their state.
- Combine switchStyle with semantic type coloring to match your application design system.
Presets