Switch
A control that allows the user to toggle between checked and not checked.
Installation
bunx --bun shadcn@latest add @sui/switchInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
Usage
import { Switch } from "@workspace/ui/components/switch"<Switch />Description
Choice Card
Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.
Disabled
Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.
Invalid
Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.
Size
Use the size prop to change the size of the switch.
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
API Reference
See the Base UI Switch documentation.