Toggle Group

Segmented toggle controls for toolbars, filters, and formatting actions.

Installation

npx shadcn@latest add @iconiq/r-togglegroup

File Structure

Usage

"use client";

import { Bold, Italic, Underline } from "lucide-react";
import { useState } from "react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/r-togglegroup";

const options = [
  { value: "bold", label: "Bold", icon: Bold },
  { value: "italic", label: "Italic", icon: Italic },
  { value: "underline", label: "Underline", icon: Underline },
] as const;

export function ToggleGroupPreview() {
  const [formats, setFormats] = useState<string[]>(["bold"]);

  return (
    <ToggleGroup
      aria-label="Text formatting"
      onValueChange={setFormats}
      type="multiple"
      value={formats}
      variant="outline"
    >
      {options.map(({ value, label, icon: Icon }) => (
        <ToggleGroupItem
          aria-label={label}
          className="size-8 min-h-8 min-w-8 shrink-0 px-0"
          key={value}
          value={value}
        >
          <Icon className="size-4" />
        </ToggleGroupItem>
      ))}
    </ToggleGroup>
  );
}

Props

Props
Description

ToggleGroup

type

Radix selection mode. Multiple allows several active items by default; single keeps one pressed item at a time.

Type "single" | "multiple"·Default "multiple"

value

Controlled selection. Radix uses a string in single mode and a string array in multiple mode. Base UI always uses a string array.

Type string | string[]

defaultValue

Initial selection for uncontrolled usage. Match the selection mode and value shape for your installed primitive.

Type string | string[]

onValueChange

Called with the next selection whenever an item is pressed or released.

Type (value: string | string[]) => void

variant

Shared visual treatment applied to every item unless an item overrides it locally.

Type "default" | "outline"·Default "default"

spacing

Gap between items in spacing units. Defaults to 1 (4px). Set to 0 for a connected outline shell with one outer border and internal dividers.

Type number·Default 1

orientation

Layout direction for the group. Also sets aria-orientation and connected divider direction when spacing={0}.

Type "horizontal" | "vertical"·Default "horizontal"

disabled

Disables the entire group and all nested items.

Type boolean

aria-label

Accessible name for the group. Required when items are icon-only and no visible group label is present.

Type string

className

Merged onto the root group wrapper for local layout or width overrides.

Type string

ToggleGroupItem

value

Stable identifier used when reading or updating the group selection.

Type string

variant

Optional local override for the shared group variant treatment.

Type "default" | "outline"

disabled

Disables this item without affecting the rest of the group.

Type boolean

aria-label

Accessible name for icon-only items. Omit when the item already contains visible text.

Type string

className

Merged onto the item button for local width, color, or spacing overrides.

Type string

children

Icon or label content rendered inside the item.

Type ReactNode

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: radix-ui, class-variance-authority, motion.

Installs a Radix toggle group with inline spring fill, sheen sweep, and press-scale motion in the same file.

Default spacing leaves a 4px gap between each bordered item.

Pass spacing={0} for a connected outline shell with one outer border and internal dividers.

The generated registry file is /r/r-togglegroup.json.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Edit the launch headline