Radio

Radio marks one choice within a RadioGroup where only a single option can be selected — deployment tier, billing plan, or permission level.

Radio + RadioGroup pair: always bind selection on RadioGroup (Option<String>). Each Radio supplies a value and label. Preview slug radio documents both components.

Give each Radio a distinct value and label. Wrap the group in Field when the set requires a visible heading or validation.

  • Mutually exclusive choices (plan tier, shipping method, environment)
  • Short option lists where every choice should remain visible
  • Form fields where exactly one value is required
  • Create an Option<String> signal and pass it to RadioGroup via bind.
  • Add one Radio per option with a unique value and visible label.
  • Wrap in Field when the group needs a field label or validation messaging.
  • Wrap preview examples in a native element with data-testid for E2E selectors.
Default selected

One option starts checked when the bound signal holds its value.

Starts unselected

No option is checked when the bound signal is None.

Click changes selection

Clicking another option moves the checked state within the group.

Field wrapper integration

Field supplies the group label; each Radio keeps its option label.

Disabled fieldset

A disabled fieldset prevents changing the current selection.

Horizontal layout

Compact row of options using RadioGroupLayout::Horizontal.

Required validation

Required rule on the group; arrow keys move selection between options.