Radio Group
Single-select radio button set with keyboard navigation.
Preview
This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.
Single-select radio button set with keyboard navigation.
Usage
Compose Root, Item, Indicator.
import * as RadioGroup from "@solidiom/radio-group"
;<RadioGroup.Root>Radio Group content</RadioGroup.Root>Installation
Install the package with pnpm add @solidiom/radio-group. The package requires compatible solid-js and @solidjs/web peer dependencies.
Parts
Radio Group exposes 3 parts:
- Root —
data-part="root". - Item —
data-part="item". - Indicator —
data-part="indicator".
Styling
Radio Group carries data-scope="radio-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
| Key | Behavior |
|---|---|
| ArrowDown/ArrowRight | Moves selection to the next radio item. |
| ArrowUp/ArrowLeft | Moves selection to the previous radio item. |
Composition
Radio Group is designed to compose with other primitives. Its parts can be combined with Field, Button, or other primitives as needed.
SSR and hydration
Radio Group renders as semantic HTML during server rendering. Interactive behavior (keyboard handlers, state management) activates on hydration without layout shift.