Design · Components · Inputs

Switch

A binary control in two sizes; the only capsule in the kit.

SourceBase UI Switch

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/switch.tsx. Registry items that depend on it install it automatically.

components/ui/switch.tsx

Usage

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

export function Example() {
  return (
    <label className="flex items-center gap-2 text-sm">
      <Switch defaultChecked />
      Streaming
    </label>
  );
}

Examples

Sizes and disabled

default measures 32×18 and sm 24×14. A disabled switch keeps its state visible at half opacity.

API Reference

Switch

Wraps Base UI's Switch and accepts its props.

SwitchProps
size : "sm" | "default" = "default"

The control size.

checked ?: boolean

Controlled checked state.

onCheckedChange ?: (checked: boolean) => void

Called when the state changes.

defaultChecked : boolean = false

Uncontrolled initial state.

disabled : boolean = false

Prevents interaction.