Toggle Group

Toggle Groups support multiple selections and immediate effects (text formatting: bold + italic). Radio Groups are single-selection and typically need submission. Use Toggle Group for instant multi-option controls, Radio Group for exclusive form choices.

Perfect for formatting toolbars (bold, italic, underline), view options (list, grid, map), or filters where multiple choices apply simultaneously. The key is immediate visual effect and potentially multiple active states at once.

Icons work well for common actions with universal symbols (bold "B", list view icon). Add text labels for clarity or use tooltips for icon-only buttons. Test with users—what's obvious to you might not be to others.

Yes, you can require at least one selection for cases where a default state is necessary (like view mode: list or grid). Prevent deselecting the last active toggle to maintain valid state. Clearly indicate required behavior.

Yes, with proper ARIA attributes, keyboard navigation (tab through toggles, space to toggle), and screen reader announcements of pressed/unpressed states. Include clear labels or tooltips so functionality is obvious to all users.

Yes, this Figma Toggle Group component matches the shadcn/ui implementation exactly, ensuring your grouped toggle controls work consistently from design to production with proper selection behavior.