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 | string The id of the DOM node that describes the switch | |
aria-labelledby Required | string The id of the DOM node that labels the switch | |
defaultChecked | boolean Uncontrolled - whether the switch is turned on | |
disabled | boolean Whether the switch is ready for user input | |
loading | boolean Whether the switch's value is being calculated | |
checked | boolean Whether the switch is turned on | |
onChange | (on: boolean) => void The callback that is called when the switch is toggled on or off | |
onClick | (e: MouseEvent) => void The 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 |