@fictjs/toggle-group

Toggle group primitives for Fict, modeled after @radix-ui/react-toggle-group. A set of toggle buttons that can be single- or multiple-selection.

Part of ui-primitives, a port of Radix Primitives to Fict.

Installation

pnpm add @fictjs/toggle-group fict

Usage

/** @jsxImportSource fict */
import * as ToggleGroup from '@fictjs/toggle-group'

export function Example() {
  return (
    <ToggleGroup.Root type="single" defaultValue="center">
      <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
      <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
      <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
    </ToggleGroup.Root>
  )
}

Anatomy

• ToggleGroup.Root (Root) — type="single" | "multiple", value / defaultValue, onValueChange, disabled, rovingFocus, orientation, dir, loop.
• ToggleGroup.Item (Item) — value, disabled.

Uses roving focus for arrow-key navigation; items expose data-state ("on" / "off").

Exports

• Components: ToggleGroup (Root), ToggleGroupItem (Item), createToggleGroupScope.
• Types: ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps.

Documentation

The API mirrors Radix, so the upstream Radix Toggle Group docs apply. See the ui-primitives overview and the architecture guide for the Fict-specific reactivity model.

License

MIT © Fict contributors.