{
  "name": "switch",
  "title": "Switch",
  "description": "An on/off toggle whose track lights up when on. The thumb slides; the light is the state.",
  "category": "forms",
  "install": {
    "command": "npx shadcn@latest add @clow/switch",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "defaultChecked": {
      "type": "boolean",
      "default": true
    },
    "disabled": {
      "type": "boolean",
      "default": false
    }
  },
  "agent": {
    "prompt": "Use Switch for settings that apply immediately (no submit). Give it an accessible name by wrapping it in a <label> or pairing it with one. Use checked + onCheckedChange for controlled state, defaultChecked for uncontrolled.",
    "examples": [
      "<label className=\"flex items-center gap-2 text-sm font-medium\"><Switch defaultChecked />Auto-relay</label>"
    ]
  },
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/switch",
    "markdown": "https://clow.cards/llms/switch.md",
    "registryItem": "https://clow.cards/r/switch.json"
  }
}
prop	type	default
defaultChecked	boolean	true
disabled	boolean	false
Draw

Playground

Examples

Props
