Orbit

Switch

Source

A toggle for instantly turning a single setting on or off. Built on Radix UI.

Overview

Use Switch for settings that take effect immediately, such as enabling a feature. For options confirmed on submit, prefer a Checkbox.

Switch is controlled via checked and onCheckedChange and accepts the full Radix Switch API. Pair it with a label so the state is clear.

Basic

A controlled toggle driven by React state.

const [checked, setChecked] = useState(true)

<Switch checked={checked} onCheckedChange={setChecked} />

States

Off, on and disabled in both positions.

<Switch checked={false} />
<Switch checked />
<Switch checked disabled />
<Switch checked={false} disabled />

With a label

Wrap the control and its Text in a Box rendered as a label so the whole row is clickable.

<Box as="label" alignItems="center" columnGap="s">
  <Switch checked={checked} onCheckedChange={setChecked} />
  <Text variant="label" as="span">Enable notifications</Text>
</Box>

Props

checked

boolean

Controlled on/off state.

defaultChecked

boolean

Initial state when the switch is uncontrolled.

onCheckedChange

((checked: boolean) => void)

Called when the switch is toggled.

disabled

booleandefault: false

Prevents interaction and dims the control.

required

booleandefault: false

Marks the field as required within a form.

name

string

Form field name submitted with the form.

value

stringdefault: 'on'

Value submitted when the switch is checked.

className

string

Merged onto the root element via class names.