Switch turns one setting on or off. It is a role="switch" button: the knob slides to the end of the rail when on, and the rail takes the primary fill.

#Demos

#Basic

Give a switch an aria-label, or wrap it in a label with its text so clicking the text toggles it too.

#Size

#Shape

The rail is a pill by default; round={false} uses the theme’s corners.

#Loading

loading shows a spinner in the knob and ignores clicks. Use it while a change is being saved, and flip value once it is done.

#Disabled

#Content

checkedContent and uncheckedContent show text or an icon in the rail beside the knob. The rail grows to fit the longer one.

#Knob icon

icon shows in the knob in both states; checkedIcon and uncheckedIcon override it for one state.

#Custom values

checkedValue and uncheckedValue replace true and false, so the switch can hold any two strings or numbers.

#Rubber band

While pressed, the knob stretches towards the other end. rubberBand={false} turns that off; it is also off while the knob shows an icon or a spinner.

#Controlled

Pass value and onUpdateValue to own the state.

#Accessibility

The switch is a native button with role="switch" and aria-checked, so Space and Enter toggle it. Label it with aria-label, aria-labelledby or a wrapping label. The rail content is decorative and hidden from assistive tech. While loading the switch is aria-busy.

#Props

Switch also accepts native button attributes and a ref. Put content in the rail and knob with the checkedContent, uncheckedContent, icon, checkedIcon and uncheckedIcon props, and restyle the rail and knob through the --r-switch-* tokens.