Toggle
Toggle components can be used to edit boolean values. Uses react-switch component.
Name | Description | Default | |
|---|---|---|---|
ReactSwitchProps(19 properties) | |||
| checked | The checked state of the switch. If true, the switch is set to checked. If false, it is not checked. boolean | false | |
| onChange | Invoked when the user clicks or drags the switch. checked describes the presumed future state of the checked prop. event is a native MouseEvent when the handle is clicked or dragged, and a SyntheticEvent at all other times. id is the ID prop of the switch. (checked: boolean, event: MouseEvent | SyntheticEvent<MouseEvent | KeyboardEvent, Event>, id: string) => void | - | |
| disabled | When true, the switch will no longer be interactive and its colors will be greyed out. boolean | - | |
| offColor | The switch will take on this color when it is not checked. Only accepts 3 or 6 digit hex colors, e.g., #888, #45abcd. Defaults to #888. string | - | |
| onColor | The switch will take on this color when it is checked. Only accepts 3 or 6 digit hex colors, e.g., #080, #45abcd. Defaults to #080. string | - | |
| offHandleColor | The color of the handle of the switch when not checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd. Defaults to #fff. string | - | |
| onHandleColor | The color of the handle of the switch when checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd. Defaults to #fff. string | - | |
| handleDiameter | The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch. Defaults to undefined. number | - | |
| uncheckedHandleIcon | Icon to display on the handle while switch is unchecked. Defaults to undefined. Element | - | |
| checkedHandleIcon | Icon to display on the handle while switch is checked. Defaults to undefined. Element | - | |
| uncheckedIcon | An icon that will be shown on the switch when it is not checked. Set to false to show no icon. Defaults to an x icon. booleanElement | - | |
| checkedIcon | An icon that will be shown on the switch when it is checked. Set to false to show no icon. Defaults to a checked icon. booleanElement | - | |
| boxShadow | The box-shadow of the handle of the switch. Defaults to undefined. string | - | |
| activeBoxShadow | The box-shadow of the handle of the switch when it is active or focused. Do not set this to null as it is important for accessibility. Defaults to '0px 0px 2px 3px #33bbff'. string | - | |
| height | The height of the background of the switch, measured in pixels. Defaults to 28. number | - | |
| width | The width of the background of the switch, measured in pixels. Defaults to 56. number | - | |
| borderRadius | Border radius of the switch and the handle. Defaults to undefined. number | - | |
| className | The className of the outer shell of the switch. Defaults to undefined. string | - | |
| id | The id of the embedded checkbox. Defaults to undefined. string | - | |
ToggleOwnProps(2 properties) | |||
package | imports | peer |
|---|---|---|
react ^17.0.1 | forwardRefRefFC | * |
react-switch ^17.0.1 | ReactSwitchReactSwitchProps | * |
theme-ui ^0.8.4 | jsxTextLabel |