Switch

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

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/switch.json

Usage

tsx
5 lines
1
2
3
4
5
import { Switch } from "@/components/ui/switch"

export default function MyComponent() {
  return <Switch />
}

Examples

With Label

Disabled

Settings Form

Receive push notifications

Play notification sounds

Share usage data

On Success Color

Blue

Red

Green

Purple

Orange

Props

PropTypeDefaultDescription
checkedbooleanControlled checked state
onSuccessColor'red' | 'blue' | 'green' | 'purple' | 'orange' | 'default'defaultColor of the switch when checked
defaultCheckedbooleanfalseDefault checked state
onCheckedChange(checked: boolean) => voidCalled when checked state changes
disabledbooleanfalseDisable the switch