<Radio.Group legend="Notification preference" defaultValue="email">
<Radio.Item label="Email" value="email" />
<Radio.Item label="SMS" value="sms" />
<Radio.Item label="Push notification" value="push" />
</Radio.Group>Installation
Barrel
import { Radio } from "@cloudflare/kumo";Granular
import { Radio } from "@cloudflare/kumo/components/radio";Usage
import { Radio } from "@cloudflare/kumo";
export default function Example() {
return (
<Radio.Group legend="Choose an option" defaultValue="a">
<Radio.Item label="Option A" value="a" />
<Radio.Item label="Option B" value="b" />
</Radio.Group>
);
}Examples
Default (Vertical)
Radio groups display vertically by default. Each radio has a label displayed to its right.
<Radio.Group legend="Account type" defaultValue="personal">
<Radio.Item label="Personal" value="personal" />
<Radio.Item label="Business" value="business" />
<Radio.Item label="Enterprise" value="enterprise" />
</Radio.Group>Horizontal
Use orientation="horizontal" for inline layouts. Items wrap when there isn't enough space.
<Radio.Group legend="Size" orientation="horizontal" defaultValue="md">
<Radio.Item label="Small" value="sm" />
<Radio.Item label="Medium" value="md" />
<Radio.Item label="Large" value="lg" />
</Radio.Group>With Description
Add helper text below the radio items using the description prop.
<Radio.Group
legend="Shipping method"
description="Choose how you'd like to receive your order"
defaultValue="standard"
>
<Radio.Item label="Standard (5-7 days)" value="standard" />
<Radio.Item label="Express (2-3 days)" value="express" />
<Radio.Item label="Overnight" value="overnight" />
</Radio.Group>With Error
Show validation errors at the group level using the error prop.
<Radio.Group
legend="Payment method"
error="Please select a payment method to continue"
>
<Radio.Item label="Credit Card" value="card" variant="error" />
<Radio.Item label="PayPal" value="paypal" variant="error" />
<Radio.Item label="Bank Transfer" value="bank" variant="error" />
</Radio.Group>Disabled
Disable the entire group or individual items.
<Radio.Group legend="Disabled group" disabled defaultValue="a">
<Radio.Item label="Option A" value="a" />
<Radio.Item label="Option B" value="b" />
</Radio.Group>
<Radio.Group legend="Individual disabled" defaultValue="available">
<Radio.Item label="Available" value="available" />
<Radio.Item label="Unavailable" value="unavailable" disabled />
</Radio.Group>Control Position
Use controlPosition="end" to place labels before radio buttons.
<Radio.Group legend="Preferences" controlPosition="end" defaultValue="a">
<Radio.Item label="Label before radio" value="a" />
<Radio.Item label="Another option" value="b" />
</Radio.Group>API Reference
Radio.Group
Container for radio buttons with legend, description, and error support.
Component "Radio.Group" not found in registry. Run pnpm build:ai-metadata to regenerate.
Radio.Item
Individual radio button within Radio.Group.
Component "Radio.Item" not found in registry. Run pnpm build:ai-metadata to regenerate.
Accessibility
Semantic HTML
Radio.Group uses semantic <fieldset> and <legend> elements for proper grouping and screen reader announcement.
Keyboard Navigation
Arrow Up/Down or Arrow Left/Right moves between options. Space selects the focused option. Tab moves focus to and from the radio group.
Screen Readers
Each radio is announced with its label and selection state. The group legend provides context for all options.