About the shadcn/ui Toggle Group Component
The Toggle Group component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add toggle-group` and copy it directly into your project.
Toggle Group Component — Frequently Asked Questions
How do I use ToggleGroup for text alignment?
Use `type="single"` for exclusive alignment: `<ToggleGroup type="single" value={align} onValueChange={setAlign}><ToggleGroupItem value="left"><AlignLeft /></ToggleGroupItem>...</ToggleGroup>`.
How do I allow multiple selections in shadcn ToggleGroup?
Use `type="multiple"`: `<ToggleGroup type="multiple" value={active} onValueChange={setActive}>`. The `value` is a `string[]` of all active item values.
How do I disable individual items in ToggleGroup?
Add `disabled` to `<ToggleGroupItem value="option" disabled>`. The item appears dimmed and cannot be selected.