Switch

Auto-generate your docs

The Switch component provides an accessible toggle control for binary states.

Installation

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

Usage

<Switch />

Props

boolean

Controlled checked state.

boolean

Default checked state for uncontrolled usage.

function

Callback when checked state changes: (checked: boolean) => void

boolean

Disables the switch.

string

Name attribute for form submission.

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

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Installation

Usage

Props

Examples

Basic Usage

With Label

Controlled

Disabled

Styling

Accessibility

​Installation

​Usage

​Props

​Examples

​Basic Usage

​With Label

​Controlled

​Disabled

​Styling

​Accessibility

Installation

Usage

Props

Examples

Basic Usage

With Label

Controlled

Disabled

Styling

Accessibility