build69
Sign inGet API key
build69  /  Components  /  Selection & Choice  /  RadioGroup

RadioGroup

v1.0.1Updated 20 Jul 2026

Mutually-exclusive option group (Radix). Use when exactly one of a small set must be chosen. Adds inline / stacked / cards layouts, description + recommended-pill slots, per-item disabled state, and an optional icon slot

View source← Back to catalog

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedformradiochoicegroup+2

The default, out-of-the-box RadioGroup.

Recommended for+14
  • ✓Small choice sets (3-7 options)
  • ✓Plan selectors
  • ✓Yes/no with reasons
  • ✓Variant selectors
Tags+6
formradiochoicegroupcardsdefault
Features+4
  • Arrow-key navigation
  • Single selection only
  • Disabled items supported
  • Inline / stacked / cards layouts
  • Per-item description
  • Per-item recommended pill
  • Optional icon slot per item
Not recommended for−2
  • ✕Large lists (use Select)
  • ✕Multi-select (use Checkbox group)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "RadioGroup" })

Usage

import { RadioGroup } from '@/components/inputs/radio-group';

<RadioGroup layout="cards" items={plans} value={plan} onValueChange={setPlan} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Selected value

string—
onValueChange

Value change callback

function—
layout

Visual layout

'inline' | 'stacked' | 'cards'—
items

Declarative radio items (alternative to children)

RadioItem[]—

Related

Platform docsAll componentsSource files