ToggleSwitch
ToggleSwitch is used to immediately toggle a setting on or off.
Page navigation navigation
React examples
Default
With a caption
Custom size
A small toggle variant is available for dense layouts.
Status label after switch
In a loading state
Display a loading indicator when waiting for an action to complete before toggling.
Props
ToggleSwitch
| Name | Default | Description |
|---|---|---|
aria-describedby | stringThe id of the DOM node that describes the switch | |
aria-labelledby Required | stringThe id of the DOM node that labels the switch | |
defaultChecked | booleanUncontrolled - whether the switch is turned on | |
disabled | booleanWhether the switch is ready for user input | |
loading | booleanWhether the switch's value is being calculated | |
checked | booleanWhether the switch is turned on | |
onChange | (on: boolean) => voidThe callback that is called when the switch is toggled on or off | |
onClick | (e: MouseEvent) => voidThe callback that is called when the switch is clicked | |
size | 'medium' | 'small' | 'medium'Size of the switch |
statusLabelPosition | 'start' | 'start' | 'end'Whether the "on" and "off" labels should appear before or after the switch. This should only be changed when the switch's alignment needs to be adjusted. For example: It needs to be left-aligned because the label appears above it and the caption appears below it. |
buttonType | 'button' | 'button' | 'submit' | 'reset'As it’s part of form behavior, this controls whether the button is of type |