PrimitiveAvailable

Toggle Group

A related set of toggle buttons with shared selection behavior.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/toggle-group.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';

export default function Demo() {
  return (
    <ToggleGroup defaultValue={['left']} aria-label="Text alignment">
      <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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Document initial, selected, disabled and focus states. Selection changes an indicator or position as well as color.
Use Space for selection controls; arrow keys change radios and sliders. Checkbox supports a mixed state.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
value	string[]	uncontrolled	Selected toggle values.
multiple	boolean	false	Allows multiple pressed items.
orientation	horizontal / vertical	horizontal	Controls layout and the keyboard navigation axis.

Accessibility

Rules that should remain intact when adapting the component to a product.

Name the group and each item. Use multiple only when simultaneous selections make sense.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.