codefast/ui

Command Palette

Search for a command to run...

Form

Radio Group

Single-selection group. Use value + onValueChange for controlled behaviour.

Sourcenpm

Install

pnpm add @codefast/ui

Import path

@codefast/ui/radio-group

Examples

With Fields

Compose radio items with Field primitives inside a FieldSet.

Subscription Plan
Battery Level

Choose your preferred battery level.

Enable Touch ID to quickly unlock your device.

Enable Touch ID to quickly unlock your device.

Invalid Radio Group
Disabled Radio Group

Choice Card

Use FieldLabel to wrap the entire Field for a clickable card-style selection.

Description

Radio group items with a description using the Field component.

Standard spacing for most use cases.

More space between elements.

Minimal spacing for dense layouts.

Disabled

Use the disabled prop on RadioGroupItem to disable individual items.

Fieldset

Use FieldSet and FieldLegend to group radio items with a label and description.

Subscription Plan

Yearly and lifetime plans offer significant savings.

Invalid

Use aria-invalid on RadioGroupItem and data-invalid on Field to show validation errors.

Notification Preferences

Choose how you want to receive notifications.

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

تباعد قياسي لمعظم حالات الاستخدام.

مساحة أكبر بين العناصر.

تباعد أدنى للتخطيطات الكثيفة.

Anatomy

How the parts compose. Copy this skeleton and fill in the slots.

import { RadioGroup, RadioGroupItem } from "@codefast/ui/radio-group";

<RadioGroup value={v} onValueChange={setV}>
  <RadioGroupItem value="a" id="a" />
  <Label htmlFor="a">A</Label>
</RadioGroup>

API reference

Props for each part of the component. All native element props are also forwarded.

RadioGroup

A single-selection group of radio items.

PropTypeDefaultDescription
value / onValueChangestring / (value: string) => void—Controlled selection and its handler.
defaultValuestring—Initial selection when uncontrolled.
disabledbooleanfalseDisables the whole group.

RadioGroupItem

PropTypeDefaultDescription
valuestring—Identifier selected when this item is chosen (required).

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

KeyFunction
TabMoves focus into the group.
Arrow+DownSelects the next item.
Arrow+UpSelects the previous item.
  • Implements the ARIA radiogroup pattern with roving focus.
  • Pair each RadioGroupItem with a Label via matching id / htmlFor.
  • Arrow keys both move focus and change selection — that’s expected for radios.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Use for 2–7 mutually-exclusive options shown at once.
  • Pre-select a sensible default.

Don’t

  • Don’t use radios for multi-select — use Checkbox Group.
  • Don’t use a radio group when a Select saves space and the list is long.