toggle-group

Single or multiple toggle button group with roving tabindex.

A group of ToggleGroupItem buttons that share selection state. Useful for segmented controls, text-formatting toolbars and filter chips.

Installation

pnpm add @fluixi/toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from '@fluixi/toggle-group';

{/* Single selection */}
<ToggleGroup type="single" defaultValue="left" onChange={setAlign}>
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

{/* Multiple selection */}
<ToggleGroup type="multiple" onValuesChange={setFormats}>
  <ToggleGroupItem value="bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic">I</ToggleGroupItem>
</ToggleGroup>

• type — single (default) or multiple.
• Roving tabindex + arrow-key navigation between items.
• Items expose aria-pressed and data-state (on / off).

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.