Thành phần

Toggle Group

Segmented set of toggles on Base UI ToggleGroup, divided by shared 1px ink rules; pressed segments are ink fills.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/toggle-group

Usage

tsx

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

<ToggleGroup aria-label="Edition" defaultValue={["print"]}>
  <ToggleGroupItem value="print">Print</ToggleGroupItem>
  <ToggleGroupItem value="web">Web</ToggleGroupItem>
</ToggleGroup>

<ToggleGroup aria-label="Formats" multiple>…</ToggleGroup>

The value is an array of the pressed item values. Name the group with aria-label or aria-labelledby. Base UI uses multiple where upstream shadcn on Radix used type="single" | "multiple".

States

State	Treatment
Item off	Ink text on paper, 1px ink border shared with its neighbours
Item pressed	Solid ink fill, paper text, `aria-pressed="true"`
Press (unpressed)	`tint-1` fill while held down; no hover effect
Focus	2px ink outline, 2px offset; the focused segment sits above its neighbours
Disabled	Halftone text and border, `cursor-not-allowed` (group or single item)

Keyboard

Key	Action
Tab / Shift+Tab	Enter or leave the group (one tab stop)
Arrow keys	Move focus between items (Left/Right horizontally, Up/Down vertically; loops)
Enter / Space	Press or unpress the focused item

Vietnamese

Ink adaptation

Upstream spacing, radius and shadow are removed. Segments overlap by 1px so neighbours share a single ink hairline, with no gap and no shift. The group's variant defaults to outline, because the shared rules are the brand's segmented look. Built on Base UI ToggleGroup and @eloquent/toggle.