Radio

One choice from a short, visible set.

Default

Editor theme

System

Light

Dark

High contrast

<RadioGroup defaultValue="system">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="system" id="theme-system" />
    <Label htmlFor="theme-system">System</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="light" id="theme-light" />
    <Label htmlFor="theme-light">Light</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="dark" id="theme-dark" />
    <Label htmlFor="theme-dark">Dark</Label>
  </div>
</RadioGroup>

Choice cards & fieldset

Subscription plan

Selection is required before publishing.

Hobby

Personal notes, up to 3 sites.

Pro

Custom domains and analytics.

A FieldSet + FieldLegend groups the options; each FieldLabel-wrapped card is clickable. required goes on the RadioGroup, not individual items.

<FieldSet>
  <FieldLegend variant="label">Subscription plan</FieldLegend>
  <RadioGroup required defaultValue="pro">
    <FieldLabel htmlFor="plan-pro">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Pro</FieldTitle>
          <FieldDescription>Custom domains and analytics.</FieldDescription>
        </FieldContent>
        <RadioGroupItem value="pro" id="plan-pro" />
      </Field>
    </FieldLabel>
  </RadioGroup>
</FieldSet>

Description & invalid

Compact

Tighter spacing for long documents.

Cozy

Comfortable line height for reading.

Pick one to continue

This field is required.

Descriptions add context via FieldContent; invalid state uses aria-invalid on the item plus data-invalid on the field. For a headless radio, use RadioGroup without RadioGroupItem and drive the UI yourself; a standalone unlabelled radio needs an aria-label.

Markdown for agents: /design/radio.md · spec: /design.md