BDS

Radio

Radios let users select exactly one option from a small set of mutually exclusive choices. Clear, distinct labels help users compare options and make confident decisions.

Radio

Delivery method

Delivery within 5–7 business days at no additional cost.

Delivery within 1–2 business days for an additional $12.99.

Available only when collection within the same region is possible.

Features

  • Optional labels and supporting descriptions for each radio.
  • Grouped usage through RadioGroup with a semantic fieldset and legend.
  • Shared group naming, whether passed explicitly or inherited from RadioGroup.
  • Visible selected, focus, and disabled states using semantic design tokens.
  • Supports standard native radio behavior and attributes.

When to use

Use radios when users must choose exactly one option from a defined list, such as delivery method, plan tier, or display preference. When multiple selections are allowed, use checkboxes instead.

Accessibility

Ensure each radio has a clear label. Group related radios with a legend when they answer a single question or belong to the same category. Keep descriptions associated with the radio via aria-describedby. Maintain visible keyboard focus, arrow-key navigation expectations, and sufficient contrast.

Best Practices

Do

Use Descriptive Labels

Use labels that make each option distinct and easy to compare, such as 'Standard shipping' and 'Express shipping'.

Use Descriptions for Clarity

Add a description for optional clarification when option details or consequences need more context.

Group Related Options

Use RadioGroup with a meaningful legend to communicate the question or category the options belong to.

Use for One-at-a-Time Selection

Use radios only when exactly one option can be selected at a time from a mutually exclusive set.

Don't

Use Vague Labels

Avoid labels like 'Option A' without meaningful context that allows users to compare choices.

Use for Independent Choices

Do not use radios for independent choices where users may need multiple selections. Use checkboxes instead.

Rely on Layout Alone

Do not rely on layout alone to communicate which radios belong to the same question without a legend.

Hide Consequences from the Label

Do not hide important tradeoffs or option details away from the radio label or description.

Present Too Many Options

Do not present too many options when another control such as Select would make comparison easier.

Props API

NameTypeDescription
labelReact.ReactNodeOptional visible label associated with the radio input.
descriptionReact.ReactNodeOptional supporting text rendered below the label and connected with aria-describedby.
idstringOptional explicit ID for label and description association; otherwise generated internally.
namestringOptional radio name; individual radios inherit the shared name from RadioGroup when one is not passed directly.
legendReact.ReactNodeRequired RadioGroup legend for grouped radio sets.
...propsReact.InputHTMLAttributes<HTMLInputElement>Native radio attributes such as checked, defaultChecked, disabled, required, value, and onChange.
...props (group)React.FieldsetHTMLAttributes<HTMLFieldSetElement>Native fieldset attributes for grouped radio layouts.