Switch
Component that switches between two states.
The <Switch> component allows the users to select between two states, e.g. on and off.
It consists of a visual selection indicator and a label.
Users may click or touch a Switch to toggle the state, or use the tab key to navigate to it and the space key to toggle it.
Anatomy
The styles are separated into some parts (container, label, thumb, track) that you can style in a custom variant.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
Switches are best used to adjust settings and other standalone options. They make a binary selection, like on and off or true and false.
The effects of a switch should start immediately, without needing to save.
Immediately activate or deactivate something.
Avoid using a switch to select multiple options that require people to save. Switches should be immediate.
Avoid using switches to toggle between opposing options.
Props
Switch
Prop
Type
Alternative components
Alternative selection controls can be used to enter decisions or declare preferences such as settings or dialogs.