Radio

Native CSS radio component derived from the List trailing radio source, node 930:4101.

Default

Unchecked Native radio with label and helper text. Checked Checked state uses a visible inner dot.

Group

Delivery method Standard Native name grouping keeps one selected option. Express Selecting this option clears the other radio. Scheduled Use native form values for submission.

States

Hover Static hover example. Focus visible Keyboard focus uses an outline. Disabled Disabled input keeps native semantics. Disabled checked Selected state remains visible without interaction.

List Integration

List item with radio The trailing control is a native radio input.

CSS API

Use .sui-radio as the label/root, .sui-radio__control for the native input, and the native name attribute for exclusive groups.

<fieldset class="sui-radio-group">
  <legend class="sui-radio-group__legend">Group label</legend>
  <label class="sui-radio">
    <input class="sui-radio__control" type="radio" name="group" value="one">
    <span class="sui-radio__mark" aria-hidden="true"></span>
    <span class="sui-radio__body">
      <span class="sui-radio__label">Label</span>
      <span class="sui-radio__helper">Helper text</span>
    </span>
  </label>
</fieldset>