{
  "name": "toggle",
  "title": "Toggle",
  "description": "A two-state key. Pressed: a small internal accent mark appears at the bottom and grows both ways until the ends meet at the top — custom detail, not a border or fill.",
  "category": "actions",
  "install": {
    "command": "npx shadcn@latest add @clow/toggle",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "size": {
      "type": "select",
      "options": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    }
  },
  "agent": {
    "prompt": "Use Toggle for on/off or selected/unselected actions. Pressed state: text darkens; an internal accent mark seeds at the bottom center and grows along both sides until the two ends unite at the top (parallel half-path draw). Never a solid fill or a static CSS border. Prefer ToggleGroup for exclusive/multi selection.",
    "examples": [
      "<Toggle aria-label=\"Bold\"><TextBold /></Toggle>",
      "<Toggle size=\"sm\" defaultPressed>Focus</Toggle>"
    ]
  },
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/toggle",
    "markdown": "https://clow.cards/llms/toggle.md",
    "registryItem": "https://clow.cards/r/toggle.json"
  }
}
Draw

Playground

Examples

Props
