Shadcn Toggle Group
React toggle group for formatting toolbars and view switchers. Built with TypeScript and Tailwind CSS for Next.js using Base UI — single or multiple, outline, and RTL.
A toggle group is a row of two-state buttons that share one value. type="single" keeps one pressed; type="multiple" lets them combine. Use it for alignment, formatting, or a list/grid switcher — a lone on/off is a Toggle.
Looking for a neobrutalism version for shadcn?
Same toggle group, thicker borders. The NeoBrutalism toggle group is the kit if you want that look.
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"<ToggleGroup type="single" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Align left">Left</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">Center</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">Right</ToggleGroupItem>
</ToggleGroup>type is required. The value is a string for single and a string[] for multiple.
Composition
Outline
variant="outline" puts a border on idle items so the group does not vanish into the page.
Size
size on the group — sm, default, or lg. Every item inherits it.
Spacing
spacing={0} is the connected segmented look. A number adds a gap between items.
Vertical
orientation="vertical" stacks the items. Pair it with spacing so the horizontal corner radii do not fuse them.
Disabled
disabled on the group greys every item. They stay in the row so the gap is obvious.
Custom
A Field plus large tiles. Control the value so the description can echo it.
RTL
Wrap with DirectionProvider and dir="rtl". Labels stay Arabic.
API
Prop
Type
ToggleGroupItem
Prop
Type
data-state is "on" or "off". variant and size on an item are fallbacks if the group did not set them.
Keyboard
| Key | Action |
|---|---|
Tab | Focus the pressed item, or the first |
Space / Enter | Toggle the focused item |
ArrowRight / ArrowDown | Next item |
ArrowLeft / ArrowUp | Previous item |
Home / End | First / last item |
Notes
Single can clear to nothing
Clicking the pressed item in type="single" sets the value to "". Ignore empty strings in onValueChange if one must stay on.
Name every icon-only item. aria-label="Toggle bold" — a bare icon is just “button”.
With other components
One pressed button
TooltipName an icon-only item
SeparatorSplit toolbar clusters
FieldLabel above the group
KbdShortcut in the tooltip
TextareaBar above the editor
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Toggle
React toggle for two-state toolbar buttons and filters. Built with TypeScript and Tailwind CSS for Next.js using Base UI — pressed state, outline, sizes, and RTL.
Tooltip
React tooltip for hover and focus hints on icon buttons. Built with TypeScript and Tailwind CSS for Next.js using Base UI — sides, shortcuts, and disabled triggers.