Skip to main content
The Switch component provides an accessible toggle control for binary states.

​
Installation

import { Switch } from "@craftdotui/baseui/components/switch";

​
Usage

<Switch />

​
Props

​
checked
boolean
Controlled checked state.
​
defaultChecked
boolean
Default checked state for uncontrolled usage.
​
onCheckedChange
function
Callback when checked state changes: (checked: boolean) => void
​
disabled
boolean
Disables the switch.
​
name
string
Name attribute for form submission.
​
value
string
Value attribute for form submission.

​
Examples

​
Basic Usage

<Switch />

​
With Label

<div className="flex items-center gap-2">
  <Switch id="airplane-mode" />
  <label htmlFor="airplane-mode">Airplane Mode</label>
</div>

​
Controlled

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

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

​
Disabled

<Switch disabled />
<Switch disabled checked />

​
Styling

The switch consists of:
  • Root: The track background that changes color when checked
  • Thumb: The circular indicator that slides when toggled
The thumb automatically translates from left to right when checked via the data-checked attribute.

​
Accessibility

  • Built on @base-ui/react Switch primitive
  • Keyboard accessible (Space/Enter to toggle)
  • Focus visible ring with offset
  • Proper ARIA role and attributes
  • Screen reader announces state changes

Build docs developers (and LLMs) love

Get started for freeTalk to us