Logomark

Switch

Last updated on March 19, 2026 at 9:27 PM

A switch is a control that toggles between two states, on and off.

SB

Storybook

FG

Figma

GH

GitHub

Code

Usage

The Switch component is a Base UI component.

<Switch />

Checked state

The Switch supports both uncontrolled and controlled checked states via the isDefaultChecked and isChecked props.

isDefaultChecked (Uncontrolled)

Use isDefaultChecked when you want the switch to manage its own internal state after the initial render. This is ideal for simple use cases where you don’t need to sync the value with external state.

<Switch isDefaultChecked />

isChecked (Controlled)

Use isChecked when you need full control over the switch state from outside the component (e.g., via React state). This is the recommended approach for forms, state synchronization, or complex interactions.

const [enabled, setEnabled] = useState(false);

<Switch
  isChecked={enabled}
  onCheckedChange={setEnabled}
/>

When to Use Which

Avoid using both props together, as this can lead to conflicting behavior.

Size

The Switch comes with 2 sizes: 18 and 24 (default).

<Switch size={18} />
<Switch size={24} />

Disabled

Use the isDisabled prop to prevent a switch from being interacted with. Disabled switches communicate that an action is currently unavailable.

<Switch isDisabled />

<Switch isChecked isDisabled />