Components
Switch
The Switch component is a toggle that allows users to turn a setting on or off. It's built on top of Radix UI's Switch primitive and includes support for labels, tooltips, and various size options.
Installation
Examples
Basic Switch
A simple switch with and without a label.
Basic switch with label
Switch sizes
A switch can be sized either small or 'base'.
Small switch
Medium switch
Label Position
The label can be positioned either before or after the switch.
Label on trailing side (default)
Label on leading side
States
Switches can be enabled, disabled, or disabled in a checked state.
Enabled switch
Disabled switch
Disabled and checked switch
Controlled Switch
Use state to control the switch's checked state.
Switch is off
With Padding
Use the padding prop to add padding to the switch.
Switch is off