Toggle Group
Group of mutually-exclusive or multi-select toggle buttons.
Preview
This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.
Group of mutually-exclusive or multi-select toggle buttons.
Usage
Compose Root, Item.
import * as ToggleGroup from "@solidiom/toggle-group"
;<ToggleGroup.Root>Toggle Group content</ToggleGroup.Root>Installation
Install the package with pnpm add @solidiom/toggle-group. The package requires compatible solid-js and @solidjs/web peer dependencies.
Parts
Toggle Group exposes 2 parts:
- Root —
data-part="root". - Item —
data-part="item".
Styling
Toggle Group carries data-scope="toggle-group" and data-part attributes on each part for CSS/recipe targeting. State attributes like data-state, data-disabled, and data-highlighted are exposed where applicable.
Keyboard & behavior
This primitive has no keyboard interaction. It renders content that does not independently receive focus or respond to key events.
SSR and hydration
Toggle Group renders as semantic HTML during server rendering. Interactive behavior (keyboard handlers, state management) activates on hydration without layout shift.