Switch

An on/off control for settings.

import { Switch } from 'components/UI/Switch'

Basic

Put Switch.Thumb in Switch.Root. When the switch is on, the track is orange.

Session replay

Pass checked and onCheckedChange to keep the state in your component.

Autocapture (off)

A disabled switch has 50% opacity. Add text-muted to the label yourself.

DisabledDisabled and on

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Choose the input from the number of options and what the user picks.

Component	Use it for
Radio	One choice from 2 or 3 options that stay visible.
Select	One choice from 4 to about 10 options, or fewer options when space is tight.
Combobox	One or more choices from a long list, with typing to filter.
Autocomplete	Free text, with suggestions that the user can ignore.
Choicebox	A choice where each option needs a description, such as a plan.
Checkbox	An on or off value in a form that the user submits.
Switch	A setting that applies at once.

Put Switch.Root and its text in a <label>, so a click on the text toggles it.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
children	ReactNode	A raised face	The face of the thumb. Pass children to replace it.