Components
Switch
An on and off switch for a setting that applies at once.
Switch has the same contract as Checkbox, drawn as a track and a
thumb. Use it for settings that take effect immediately. It is a client component and reads
components.Switch.defaultProps.
import Switch from '@hone-ui/react/Switch';Examples
<FormControlLabel control={<Switch defaultChecked />} label="Wi-Fi" />
<FormControlLabel control={<Switch />} label="Bluetooth" />A controlled switch reads checked from your state:
<Switch
edge="end"
checked={on}
onChange={(event, checked) => setOn(checked)}
inputProps={{ 'aria-label': 'Wi-Fi' }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked, defaultChecked | boolean | none, false | Controlled and starting state. |
onChange | (event, checked) => void | none | The real change event and the new state. |
color | 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning' | 'primary' | The on color. |
size | 'small', 'medium' | 'medium' | The size. |
edge | 'start', 'end', false | false | Pulls the switch toward its edge. |
disabled, required, readOnly | boolean | false | As in Checkbox. |
name, value, autoFocus, id, inputRef, slotProps, inputProps, disableRipple | Exactly as in Checkbox. | ||
sx, className, style, ref | Standard. They go to the root label. |
Inside a FormControl, disabled follows it and error colors the switch. required does not.
Notes
- No
slots,iconorcheckedIcon. - The real input covers the whole switch, so test tools can click it directly, with no
force.
Accessibility
The input has role="switch", and Space toggles it. Name it with FormControlLabel or
inputProps['aria-label'].