Switch

Install

npx bambiui add switch

Import from your own project source, never from Base UI directly, and never from a published bambiui package:

import { Switch } from "@/components/ui/switch";

States

Hover, active, and focus-visible are styled but cannot be shown statically. Use the component with a mouse or keyboard to verify those interaction states.

Supported states: `default`, `hover`, `focus-visible`, `checked`, `read-only`, `disabled`.

Props

Native props and refs supported by the underlying Base UI primitive are preserved.

Tokens

Override any of these in your theme CSS to restyle Switch:

• --bambi-switch-track-width
• --bambi-switch-track-height
• --bambi-switch-track-padding
• --bambi-switch-thumb-size
• --bambi-track-background
• --bambi-track-fill-background
• --bambi-track-radius
• --bambi-thumb-background
• --bambi-thumb-border
• --bambi-thumb-shadow

Switch or checkbox?

Use a switch for a setting that takes effect immediately, and a Checkboxfor a value that is submitted with a form. A switch has no indeterminate state, because “partly on” is not a setting.

Accessible name

A switch renders only the track and its thumb, so wrap it in a <label> or put it inside Field.Label:

<Field.Root name="notifications">
  <Field.Label>
    <Switch defaultChecked />
    Email notifications
  </Field.Label>
  <Field.Description>Sent at most once a day.</Field.Description>
</Field.Root>

Size and motion

The switch has one fixed geometry in this release, driven by the --bambi-switch-*tokens. The thumb's travel is derived from those tokens, so changing the track width or thumb size keeps the thumb aligned with the track inset. The slide transition is dropped under prefers-reduced-motion.

Keyboard