Toggles on one tray, for a single choice or several.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/toggle-groupPlayground
Format
Align
View
Spaced
Vertical
Disabled
Toolbar
Favorites
- Roadmap
- Design review
- Launch notes
Type
Appearance
Orientation
Icons animation
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/toggle-group
Format
type multiple lets choices stack, so Bold and Italic can both be on.
Appearance
Orientation
View
Text toggles for switching how the same content is shown. The lift slides between them.
Appearance
Motion
Accessibility
- Single choice is a radio group; multiple choice is a toolbar.
- Icon only items need ariaLabel.
Motion
- Press scales to 0.96.
- In a single choice group, the lift slides on a spring.
- With reduced motion, the lift fades and nothing slides or scales.
Responsive behavior
- Height steps up on Mobile through the size tokens.
Performance
- The sliding lift only renders in single choice groups with the segment appearance. It is not drawn when still.
- Each group has its own layout id, so several groups on a page do not animate each other.
- Roving focus reads the DOM on key press, so idle groups run no code.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import ToggleGroup, ToggleToolbar and ToggleToolbarSeparator from @/components/fetaui/toggle-group.
- type is required. single gives a string and multiple gives a string array in value and onValueChange.
- label names the group. Icon only items need ariaLabel.
- A single choice group cannot be turned off: pressing the selected toggle does nothing.
- Composes Toggle.
Related
ToggleComponentA button that stays pressed.Button GroupComponentRelated actions in one shape: Segmented, Attached or Toolbar. For a main action with a menu, use Split Button.TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.SelectComponentChoose one value from a list. The list grows out of the trigger and the highlight glides.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.