Switch
Toggle between two states
Source ↗️ Report Issue ↗️Use the Switch
component to allow users to enable or disable options or settings in an application. They resemble physical on/off switches and provide a simple and intuitive way for users to control features or preferences. They provide the same functionality as the Checkbox
component, with only visual differences.
States
The state of the switch can be modified with the toggled
and disabled
props:
Styles
To style the Switch
component, you can override the following CSS variables:
The colors of switches can also be changed individually using the offColor
and onColor
props:
To change the style of the switch, use the square
and small
props:
Labels
To add labels to the switch, use the label
prop. You can switch the direction of the layout using the reverse
prop:
API
Prop | Purpose |
---|---|
label | Sets a label for the switch. No label is added by default. |
reverse | Sets the position of the label to be on the other side of the switch. |
toggled | Sets the default state of the switch to toggled. Defaults to false . |
disabled | Disables the switch. |
offColor | Sets the background color of the switch in the off state. |
onColor | Sets the background color of the switch in the on state. |
small | Sets the style of the switch to a smaller version. |
square | Sets the style of the switch with a small border radius. |
className | Pass additional CSS classes for the switch. |
Svelte & React Prop | Purpose |
---|---|
onClick | Attach on-click event listeners. |
Request improvement for this page