{
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "A glass rail that shares pressed state across its toggles. The pressed one rises to lit glass, echoing the tabs indicator.",
  "category": "forms",
  "install": {
    "command": "npx shadcn@latest add @clow/toggle-group",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "multiple": {
      "type": "boolean",
      "default": false,
      "description": "Allow several toggles to be pressed at once."
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "orientation": {
      "type": "select",
      "options": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    }
  },
  "agent": {
    "prompt": "Use ToggleGroup for a small set of related tool states on one rail: Toggle children each carry a value, and the group holds the pressed values as an array (value/defaultValue, even for single selection). Default is single-select where pressing another releases the current one; set multiple for independent states like text formatting. For switching between peer views with content panels, use Tabs; for a mutually exclusive form answer, use RadioGroup; for one lone state, use a bare Toggle.",
    "examples": [
      "<ToggleGroup defaultValue={[\"center\"]}><Toggle value=\"left\" aria-label=\"Align left\"><TextalignLeft /></Toggle><Toggle value=\"center\" aria-label=\"Align center\"><TextalignCenter /></Toggle><Toggle value=\"right\" aria-label=\"Align right\"><TextalignRight /></Toggle></ToggleGroup>",
      "<ToggleGroup multiple defaultValue={[\"bold\"]}><Toggle value=\"bold\" aria-label=\"Bold\"><TextBold /></Toggle><Toggle value=\"italic\" aria-label=\"Italic\"><TextItalic /></Toggle></ToggleGroup>"
    ]
  },
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/toggle-group",
    "markdown": "https://clow.cards/llms/toggle-group.md",
    "registryItem": "https://clow.cards/r/toggle-group.json"
  }
}
prop	type	default
multiple	boolean	false
disabled	boolean	false
orientation	horizontal \| vertical	horizontal
Draw

Playground

Examples

Props
