Radio

A radio group built on React Aria — arrow-key navigation, form semantics, and label association for free. The selected dot wears the same blue/500 → blue/600 gradient and inset highlight as the checkbox family, in md (16px) and sm (14px) sizes.

Installation

You can add this radio component using our CLI or manually:

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add radio

Sizes

Two sizes via the size prop — md (16px, the default) and sm (14px, the Figma radio_selected_sm glyph used inside menus), paired with Body 2 labels.

md — 16px
sm — 14px
<Radio size="md" value="a">Medium</Radio> {/* 16px (default) */}<Radio size="sm" value="b">Small</Radio> {/* 14px */}

Radio card

Selectable card with a title and optional description — the whole card selects the radio, matching Checkbox Card's surface. Cards live inside a RadioGroupfor single selection and arrow-key navigation. It's a separate registry item: npx boardui add radio-card.

import { RadioCard } from "@/components/base/radio/radio-card";import { RadioGroup } from "@/components/base/radio/radio"; <RadioGroup aria-label="Plan" defaultValue="pro"> <RadioCard value="starter" title="Starter" description="For side projects and experiments." /> <RadioCard value="pro" title="Pro" description="For growing teams that need more." /> <RadioCard value="enterprise" title="Enterprise" description="Custom limits and support." isDisabled /></RadioGroup>