Components
ToggleGroup
A group of mutually exclusive or independent toggles.
ToggleGroup is built on the Base UI ToggleGroup primitive. It renders a set of toggle buttons that can be single or multi-select.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/toggle-group.jsonUsage
"use client";
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group";
export default function Example() {
return (
<ToggleGroup type="single">
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>
);
}Examples
Single
Multiple
Vertical
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
ToggleGroupdata-slot="toggle-group" | ToggleGroupBase UI |
|
ToggleGroupItemdata-slot="toggle-group-item" | ToggleBase UI | — |
Changelog
Full ToggleGroup historyLast updated on