Components

Toggle group

Group of Toggle buttons — type='single' for exclusive selection or type='multiple' for co-selectable filters. Shares the Toggle variants.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<ToggleGroup type="single" defaultValue="grid">
  <ToggleGroupItem value="grid"><GridFour weight="light" className="size-4" /></ToggleGroupItem>
  <ToggleGroupItem value="list"><List weight="light" className="size-4" /></ToggleGroupItem>
  <ToggleGroupItem value="rows"><Rows weight="light" className="size-4" /></ToggleGroupItem>
</ToggleGroup>

When to use

  • View mode switch (grid / list / detail).
  • Multi-select filters (Live / Test / Sandbox).

When not to use

  • A single choice among 5+ options — use Select.

Usage

Do
  • Set a clear default so the group isn't empty.
  • Use type='single' for exclusive picks.
Don't
  • Don't mix icons and text sizes across items.