Cognition

Components

Toggle Group

A set of two or more toggle buttons that share one selection. Use it for modes, view toggles, and filter sets where the choice stays visible.

Toggle Group is built on the Toggle primitive. Single mode enforces exactly one selection; multiple mode allows zero or more.

Preview

Rendered with live Cognition tokens. Toggle items on and off, no dark: classes.

Variants

<ToggleGroup type="single" variant="outline">
<ToggleGroup type="multiple">

Single keeps exactly one item active. Multiple lets several be active at once. Both take a variant and a size.

States

Default. Nothing pressed.

Pressed. One item active in single mode.

Multiple pressed. Several active at once.

<ToggleGroup disabled>
<ToggleGroupItem value="center" disabled>

Disable the whole set with disabled on the group, or a single item with its own disabled.

API

Prop
Type
Default
Description
type
"single" | "multiple"
required
single allows one selection at a time; multiple allows zero or more.
value
string | string[]
undefined
Selected value(s) when controlled. A string for single, an array for multiple.
onValueChange
(value) => void
undefined
Called with the new selection. Receives a string for single, an array for multiple.
disabled
boolean
false
Disables every item in the group. Single items also take their own disabled prop.
size
"sm" | "default" | "lg"
"default"
Item height and padding. default is the medium size.
variant
"default" | "outline"
"default"
default is borderless; outline adds a border to each item.

Props apply to ToggleGroup. Each ToggleGroupItem takes a value and its own disabled.

Don't and Do

Don't

Don't use a Toggle Group to move between pages or views of content. Switching what is shown on screen is navigation, and that is the job of Tabs. A Toggle Group sets state on the current view, it does not change which view you are on.

Do
<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter />
  </ToggleGroupItem>
</ToggleGroup>

Use it for mode selection, view toggles, or filter sets where the selection is persistent and visible.

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Bold, Italic, Underline } from "lucide-react";

export function Formatting() {
  return (
    <ToggleGroup type="multiple" defaultValue={["bold"]}>
      <ToggleGroupItem value="bold" aria-label="Bold">
        <Bold />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Italic">
        <Italic />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Underline">
        <Underline />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}