RadioGroup

RadioGroup

<RadioGroup label="Plan" defaultValue="pro">
  <Radio value="free">Free</Radio>
  <Radio value="pro">Pro</Radio>
  <Radio value="team">Team</Radio>
</RadioGroup>

Install: @helixui/core

import { RadioGroup, Radio } from '@helixui/core'

status: stable · since: 0.1.0

Tags: radio, choice, exclusive

Anatomy

( ◉ ) Option A
( ◯ ) Option B
( ◯ ) Option C

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — vertical stack of options
• stackable — true
• fullBleed — false

Visual

A vertical or horizontal group of radio buttons. Selected radio fills with brand color; label sits to the right.

Props

Name	Type	Default	Description
label	ReactNode	—	Group label.
description	ReactNode	—	Helper text.
errorMessage	string | (v: ValidationResult) => string	—	Error text.
orientation	'vertical' | 'horizontal'	vertical	Layout.
value	string	—	Controlled selected value.
defaultValue	string	—	Uncontrolled initial value.
isRequired	boolean	false	Required for validation.
isDisabled	boolean	false	Disables all radios.
onChange	(value: string) => void	—	Change handler.

Slots

• children — Radio components

Tokens used

color.bg.surface.default, color.bg.action.brand.default, color.border.strong, color.border.focus, color.text.primary, color.text.secondary, color.text.action.danger, space.2, space.4, font.family.sans, font.size.sm, font.weight.medium

Accessibility

Role: radiogroup

Keyboard

Key	Action
ArrowDown	Move to next radio.
ArrowUp	Move to previous radio.
Space	Selects focused radio.

Composes with

Component	Relation	Note
Radio	child	Default radio child.
RadioCard	child	Card-shaped option.
Field	wraps	RadioGroup has built-in label/description.
Checkbox	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

simple choice

“choose A / B / C”

<RadioGroup label="Choose one" value={v} onChange={setV}>
  <Radio value="a">A</Radio>
  <Radio value="b">B</Radio>
  <Radio value="c">C</Radio>
</RadioGroup>

Related

• RadioCard
• Checkbox