RadioGroup

• Layer: Component
• Base: @ark-ui/solid/radio-group — RadioGroupRoot + RadioGroupItem + RadioGroupItemControl + RadioGroupItemHiddenInput + RadioGroupItemText

Basic usage

Backend picker

Ollama

oMLX

Selected: ollama

More options

Three items

Auto

Manual

Off

Anatomy

import { RadioGroup } from "@risingswamp/design-system";

<RadioGroup.Root value={value()} onValueChange={(d) => setValue(d.value)}>
  <RadioGroup.Item value="a">Option A</RadioGroup.Item>
  <RadioGroup.Item value="b">Option B</RadioGroup.Item>
</RadioGroup.Root>;

RadioGroup.Item is monolithic — it internally renders the hidden native input, the visual circle control, and the label text. Callers only provide value + children.

Props

RadioGroup.Root

Extends RadioGroupRootProps from @ark-ui/solid/radio-group.

Prop	Type	Default	Description
value	string	—	Controlled selected value
defaultValue	string	—	Uncontrolled initial value
onValueChange	(details: { value: string }) => void	—	Called when selection changes
disabled	boolean	false	Disables all items
class	string	—	Extra class on the root <div>

RadioGroup.Item

Prop	Type	Default	Description
value	string	required	The value this item represents
disabled	boolean	false	Disables this specific item
children	JSX.Element	required	Label text rendered next to the circle
class	string	—	Extra class on the item <label>

Design tokens

Token	Usage
border	Circle border in unselected state
accent.default	Circle border + inner dot in selected state
{shadows.focus}	Focus ring on keyboard navigation
text.secondary	Label colour
fg	Label colour on hover

Accessibility

• Renders a native hidden <input type="radio"> inside each item via RadioGroupItemHiddenInput for full keyboard + screen reader support.
• Arrow keys move between options; Space selects.
• Focus ring appears on :focus-visible only (not on click).
• aria-checked state is managed by the Ark UI primitive.