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:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

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>