Get Started

Welcome Why We're Different Choosing a Variant Changelog License

Components

Overview Alert Dialog Checkbox Collapsible Dialog Field Input Menu Number Field Popover Progress Radio Scroll Area Select Separator Slider Switch

Tabs Toggle Tooltip

Shared Components

Input Textarea Card Avatar Table Alert Breadcrumb Pagination

0installs

Components

Maps

GitHub stars

Home Docs Components StaticSwitch

Switch

A toggle switch for on/off states. Built on Base UI Switch primitives.

Airplane Mode

Usage

import { SwitchRoot, SwitchThumb } from "@/components/ui/static/switch"

<SwitchRoot>
  <SwitchThumb />
</SwitchRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react

Examples

With Label

Notifications

Receive push notifications

Disabled

Disabled switch

API Reference

checkedboolean

Controlled checked state.

onCheckedChange(checked: boolean) => void

Callback when checked state changes.

defaultCheckedboolean

Default checked state for uncontrolled usage.

disabledboolean

Whether the switch is disabled.