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 Base UI.

Installation

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

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

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 value="bold" aria-label="Toggle bold">
        <Icon name="Bold" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Icon name="Italic" />
      </ToggleGroupItem>
      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
        <Icon name="Underline" />
      </ToggleGroupItem>
    </>
  );
}
<ToggleGroup multiple variant="default" size="default" disabled={false}>
  <Items />
</ToggleGroup>;

Examples

Default

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

Outline

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

Single

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

Small

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

Large

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

Disabled

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

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

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.