Toggle Group
A set of toggles where one or multiple can be active.
Import
import { ToggleGroup, ToggleGroupItem } from "@retents/ui/toggle-group"Usage Guidelines
When to use
- For a group of related toggles such as text formatting toolbars (Bold/Italic/Underline).
- Use
type="single"when only one option can be active (like alignment), ortype="multiple"when several can be active simultaneously (like text formatting).
When NOT to use
- For mutually exclusive form selections — use RadioGroup instead.
- For selecting multiple options in a form — use Checkbox instead.
- For a single toggle button — use Toggle instead.
Preview
Single selection:
Multiple selection:
Usage
<ToggleGroup type="single">
<ToggleGroupItem value="bold" aria-label="Toggle bold">B</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">I</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">U</ToggleGroupItem>
</ToggleGroup>