Togglegroup

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download toggle-group -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
function Items() {
  return (
    <>
      <ToggleGroupItem id="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem id="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem id="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup selectionMode="multiple" variant="default" size="default" isDisabled={false}>
  <Items />
</ToggleGroup>;

Examples

Default

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
function Items() {
  return (
    <>
      <ToggleGroupItem id="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem id="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem id="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup selectionMode="multiple" >
  <Items />
</ToggleGroup>;

Outline

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
function Items() {
  return (
    <>
      <ToggleGroupItem id="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem id="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem id="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup selectionMode="multiple" variant="outline">
  <Items />
</ToggleGroup>;

Single

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
function Items() {
  return (
    <>
      <ToggleGroupItem id="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem id="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem id="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup selectionMode="single">
  <Items />
</ToggleGroup>;

Small

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
function Items() {
  return (
    <>
      <ToggleGroupItem id="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem id="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem id="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup selectionMode="multiple" size="sm">
  <Items />
</ToggleGroup>;

Large

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
function Items() {
  return (
    <>
      <ToggleGroupItem id="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem id="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem id="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup selectionMode="multiple" size="lg">
  <Items />
</ToggleGroup>;

Disabled

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
function Items() {
  return (
    <>
      <ToggleGroupItem id="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem id="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem id="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup selectionMode="multiple" isDisabled>
  <Items />
</ToggleGroup>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default	Description
`size`	`string`	`—`	Size applied to every item in the group.
`spacing`	`number`	`2`
`variant`	`string`	`—`	Visual style applied to every item in the group.

ToggleGroupItem

Prop	Type	Default	Description
`size`	`string`	`"default"`
`variant`	`string`	`"default"`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.