Switch

A control that allows the user to toggle between checked and not checked.

forminteractive

Loading preview...

Installation

npx baseui-cn add switch

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

<Switch label="Email notifications" />

A simple switch.

Loading preview...

Descriptive switch.

Loading preview...

A disabled switch.

Loading preview...

A controlled switch.

Loading preview...

See the Base UI Switch documentation for the full API reference, including all props, data attributes, and CSS classes.