Radio

InstallationCopy Anchor Link

Installs Field too.

UsageCopy Anchor Link

import { Field, FieldItem, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field";
import { Radio, RadioGroup } from "@/components/ui/radio";

export function ContactField() {
  return (
    <Field name="contact">
      <FieldSet render={<RadioGroup defaultValue="sms" />}>
        <FieldLegend>Preferred contact method</FieldLegend>
        <FieldItem>
          <FieldLabel>
            <Radio value="sms" />
            Text message
          </FieldLabel>
        </FieldItem>
        <FieldItem>
          <FieldLabel>
            <Radio value="email" />
            Email
          </FieldLabel>
        </FieldItem>
      </FieldSet>
    </Field>
  );
}

Use Radio when people must choose one of two to five options and seeing them all helps. Start with the most common choice selected only when it is a safe default. For more options use Select; for several choices use Checkbox.

AnatomyCopy Anchor Link

• RadioGroup: the group; one value at a time.
• Legend (FieldLegend): the name of the group.
• Radio: the round control with a dot when chosen.
• Label and helper text for each option, from FieldItem.

ExamplesCopy Anchor Link

Radio groupCopy Anchor Link

Wrap the group in a Field, then a FieldSet that renders the RadioGroup, so the legend names the group and each FieldItem labels its radio.

StatesCopy Anchor Link

Unselected and selected, in the primary and neutral tones, read-only and disabled.

RTLCopy Anchor Link

The radio is on the right (start) of its label. Use ArrowDown and ArrowUp in a vertical group: they work the same in both directions. ArrowRight moves to the next option and ArrowLeft to the previous one in both directions too (Base UI does not mirror them).

AccessibilityCopy Anchor Link

• The radiogroup role on the group and radio with aria-checked on each option. A FieldSet and its legend name the group.
• Only one radio is in the Tab order, so the group is one stop.
• The unchecked ring and the chosen ring and dot are 3:1 or better on every surface (WCAG 1.4.11).
• Focus is a 2px outline 2px outside the circle. Disabled and read-only radios keep their label legible.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• Same dark-mode hover and press fill as Checkbox: the dot stays green-600.
• Read-only has a 3:1 ring (Figma: 1.5:1).

None. This component matches the DGA Figma file.

ContrastCopy Anchor Link