Radio group

GradeTested

UsageCopy Anchor Link

import { Label, RadioGroup, RadioGroupItem } from "@cadence-clinical/ui";

<RadioGroup defaultValue="text" aria-labelledby="contact-by" onValueChange={setContactBy}>
  <Label>
    <RadioGroupItem value="text" />
    Text message
  </Label>
  <Label>
    <RadioGroupItem value="phone" />
    Phone call
  </Label>
</RadioGroup>;

Radio group is built on the Base UI Radio and accepts all of its props. It follows the shadcn Radio Group and keeps its part names.

Use it when there are a few options and seeing them all helps the choice. For a long list, a Select takes less room.

What Cadence changesCopy Anchor Link

• Each item's target is as large as a control: 32px when compact and 44px when comfortable.
• The gap between items follows the density.
• The focus ring and the boundary are never faded.

AccessibilityCopy Anchor Link

• Name the group with aria-labelledby or aria-label, and wrap each item in a Label.
• The arrow keys move the choice, and Tab moves past the group.
• The chosen item differs by its dot as well as its fill.