Component · 09

Switch

For settings that take effect immediately. Built on Base UI; a square block of ink slides across the track. It sinks into the page when pressed, like the checkbox.

With a label

Click the text or the switch. Space toggles it from the keyboard.

Email notificationsDark mode

tsx

<Switch label="Email notifications" />
<Switch label="Dark mode" defaultChecked />

Disabled

DisabledDisabled, on

tsx

<Switch label="Disabled" disabled />
<Switch label="Disabled, on" disabled defaultChecked />

Without visible text

No label prop means you must name it yourself.

tsx

<Switch aria-label="Enable beta features" />

Props

Prop	Type	Default	Description
label	ReactNode	-	Wraps the switch in a <label> so the text toggles it and names it. Without it, pass aria-label.
checked / defaultChecked	boolean	false	Controlled / uncontrolled state.
onCheckedChange	(checked, details) => void	-	Fires when the user toggles it.
disabled / readOnly / required	boolean	false	As in a native checkbox.
name / value	string	"on"	Submitted with the surrounding form when on.
className	string	-	With a label: applied to the wrapper. Without: to the switch.

Use a Switch when the change applies at once. Use a Checkbox when the user confirms a choice later, for example with a Save button.