A set of toggles: one at a time, like text alignment, or any of them, like Bold, Italic, Underline.
$ pnpm dlx shadcn@latest add https://dashral.com/r/toggle-group.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/toggle-group.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
components.json
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/toggle-groupUsage
example.tsx
import { Bold, Italic } from "lucide-react"
import { ToggleGroup } from "@/components/dashral/toggle-group"
<ToggleGroup
type="multiple"
attached
aria-label="Formatting"
items={[
{ value: "bold", icon: <Bold />, "aria-label": "Bold" },
{ value: "italic", icon: <Italic />, "aria-label": "Italic" },
]}
/>Examples
API reference
ToggleGroup
Also takes every prop of Radix Toggle Group(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
type | "single" | "multiple"Required. One pressed at a time, or any of them. | — |
items | { value, label?, icon?, aria-label?, disabled? }[]Required. The toggles; an icon alone needs an aria-label. | — |
value / defaultValue / onValueChange | string (single) | string[] (multiple)Controlled or initial state. | — |
variant | "ghost" | "outline"As Toggle's. | "ghost" |
size | "sm" | "default" | "lg"As Toggle's. | "default" |
color | "primary" | "neutral"The tint of a pressed toggle: grey, as a segmented control, or a soft primary. | "neutral" |
attached | booleanJoined into one bar, as a toolbar's. | false |
classNames | { item }Classes for each toggle. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Keyboard
| Keys | Action |
|---|---|
| ←or→ | Move between the toggles |
| EnterorSpace | Press the focused toggle |
Accessibility
- Single is a radio group (role="radio", aria-checked); multiple is buttons with aria-pressed. Give the group an aria-label.