Switch
GitHubSwitch with an optional label, description, validation error, and field layout.
Installation
bash
pnpm dlx shadcn@latest add @cs/switchUsage
tsx
import { Switch } from "@/components/cs/switch";tsx
<Switch
name="emailUpdates"
label="Email updates"
description="Receive product news and release notes."
/>Switch colors
Shows all available checked-state color variants.
tsx
import { Switch } from "@/registry/cs/ui/switch"
import { PreviewPanel } from "./preview-utils"
export default function SwitchColorsPreview() {
return (
<PreviewPanel>
<Switch name="default" label="Default" color="default" defaultChecked />
<Switch name="dark" label="Dark" color="dark" defaultChecked />
<Switch name="green" label="Green" color="green" defaultChecked />
<Switch name="red" label="Red" color="red" defaultChecked />
<Switch name="yellow" label="Yellow" color="yellow" defaultChecked />
<Switch name="orange" label="Orange" color="orange" defaultChecked />
</PreviewPanel>
)
}
API Reference
Switch
Switch with optional label, description, validation error, and field layout.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Classes for the switch control. |
| color | "default" | "green" | "red" | "dark" | "yellow" | "orange" | null | undefined | - | Controls the checked switch color. |
| description | string | - | Helper text displayed below the label. |
| error | string | null | - | Validation error message. |
| label | string | - | Switch label. |
| orientation | "vertical" | "horizontal" | "responsive" | null | "horizontal" | Layout of the switch control and its text. |
| size | "default" | "sm" | undefined | "default" | - |
| switchClassName | string | - | Additional class name for the field wrapper. |