Toggle Group

Single and multiple selection button group with roving tabindex, sizes and outline/ghost variants.

#toolbar #buttons #segmented

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

ToggleGroupItemProps

Also accepts all props of Omit<React.ComponentProps<"button">, "value">

Prop	Type	Default	Description
value* required	`string`	—	—

Install

$ npx shadcn@latest add https://chromotion.dev/r/toggle-group.json

More like this

Multi Select

Searchable multi-value dropdown with removable chips, keyboard navigation, select all/clear and a max-selection limit.

Date Range Picker

Two-month range calendar popover with hover preview, presets, min/max bounds and full keyboard navigation.

Currency Input

Formatted money input with live thousands separators, decimals on blur, a currency selector and min/max validation.