Toggle Group

A set of two-state buttons that can be toggled on or off. Built on Toggle. Connected items use logical start/end radius and borders for RTL.

Basic

Multi-select toolbar with type="multiple".

Installation

CLI

npx @sonojs/ui@latest add toggle-group

Also needsnpx @sonojs/ui@latest add toggle

Composition

structure

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

Usage

toggle-group.tsx

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function Example() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Direction

dir comes from useDirection. With spacing={0}, first/last items use rounded-s / rounded-e (not left/right).

direction.tsx

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

// Connected groups use rounded-s / rounded-e and border-s so corners
// and shared borders flip correctly in RTL. Toggle LTR/RTL in the preview.
<ToggleGroup type="single" variant="outline">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

Props

Prop	Type	Default	Description
type	"single" · "multiple"	—	Single selection or multi-select.
variant	"default" · "outline"	"default"	Passed through to items via context.
size	"sm" · "default" · "lg"	"default"	Item height scale.
spacing	number	0	Gap between items. `0` connects them with shared borders.
orientation	"horizontal" · "vertical"	"horizontal"	Layout axis of the group.
dir	"ltr" · "rtl"	inherited	Writing direction for corners and keyboard nav.