Radio

Figma

An input group which can only have one entry selected at a time.

<!-- Base -->
<fieldset>
<div class="d-flex gs8">
<div class="flex--item">
<input class="s-radio" type="radio" name="example-radio" id="example-item" />
</div>
<label class="flex--item s-label fw-normal" for="example-item">Radio Label</label>
</div>
</fieldset>

<!-- Disabled -->
<fieldset class="mt8">
<div class="d-flex gs8 is-disabled">
<div class="flex--item">
<input class="s-radio" type="radio" name="example-radio-disabled" id="example-item-disabled" disabled />
</div>
<label class="flex--item s-label fw-normal" for="example-item-disabled">Radio Label</label>
</div>
</fieldset>

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to radios, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Be sure to associate the radio label by using the for attribute. The value here is the input’s id.
  • Use the fieldset and legend elements for grouping radio options together.

For more information, please read Gov.UK’s article, "Using the fieldset and legend elements".

<fieldset class="d-flex gs8 gsy fd-column">
<legend class="flex--item s-label">Which fruit do you like best?</legend>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-vert-group" id="choice-vert-radio-1" />
</div>
<label class="flex--item s-label fw-normal" for="choice-vert-radio-1">Apples</label>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-vert-group" id="choice-vert-radio-2" />
</div>
<label class="flex--item s-label fw-normal" for="choice-vert-radio-2">Oranges</label>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-vert-group" id="choice-vert-radio-3" />
</div>
<label class="flex--item s-label fw-normal" for="choice-vert-radio-3">Bananas</label>
</div>
</div>
</fieldset>
Which fruit do you like best?
<fieldset class="d-flex gs8 gsy fd-column">
<legend class="flex--item s-label">Which fruit do you like best?</legend>
<div class="flex--item">
<div class="d-flex gs16">
<div class="flex--item">
<div class="d-felx gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-horz-group" id="choice-horz-radio-1" />
</div>
<label class="flex--item s-label fw-normal" for="choice-horz-radio-1">Apples</label>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-horz-group" id="choice-horz-radio-2" />
</div>
<label class="flex--item s-label fw-normal" for="choice-horz-radio-2">Oranges</label>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-horz-group" id="choice-horz-radio-3" />
</div>
<label class="flex--item s-label fw-normal" for="choice-horz-radio-3">Bananas</label>
</div>
</div>
</div>
</div>
</fieldset>
Which fruit do you like best?
<fieldset class="d-flex gs8 gsy fd-column">
<legend class="flex--item s-label">Which fruit do you like best?</legend>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="choice-copy-radio" id="choice-copy-radio-1" checked />
</div>
<div class="flex--item">
<label class="d-block s-label fw-normal" for="choice-copy-radio-1">
Apples
<p class="s-description">A sweet, edible fruit produced by an apple tree (Malus pumila).</p>
</label>
</div>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="choice-copy-radio" id="choice-copy-radio-2" />
</div>
<div class="flex--item">
<label class="d-block s-label fw-normal" for="choice-copy-radio-2">
Oranges
<p class="s-description">A fruit of the citrus species Citrus × sinensis in the family Rutaceae.</p>
</label>
</div>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx">
<div class="flex--item">
<input class="s-radio" type="radio" name="choice-copy-radio" id="choice-copy-radio-3" />
</div>
<div class="flex--item">
<label class="d-block s-label fw-normal" for="choice-copy-radio-3">
Bananas
<p class="s-description">A fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.</p>
</label>
</div>
</div>
</div>
</fieldset>
Which fruit do you like best?

Radio inputs use the same validation states as inputs.

Class Applies Description
.has-warning Parent wrapper for radio and label Used to warn users that the value they’ve entered has a potential problem, but it doesn’t block them from proceeding.
.has-error Parent wrapper for radio and label Used to alert users that the value they’ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.
.has-success Parent wrapper for radio and label Used to notify users that the value they’ve entered is fine or has been submitted successfully.
<fieldset class="d-flex gs8 gsy fd-column">
<legend class="flex--item s-label">Which fruit do you like best?</legend>
<div class="flex--item">
<div class="d-flex gs8 gsx has-warning">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-valid-group" id="choice-valid-radio-1" />
</div>
<div class="flex--item">
<label class="d-block s-label fw-normal" for="choice-valid-radio-1">
Apples
<p class="s-input-message"><strong>Note:</strong> Apples are currently not in season.</p>
</label>
</div>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx has-error">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-valid-group" id="choice-valid-radio-2" />
</div>
<div class="flex--item">
<label class="d-block s-label fw-normal" for="choice-valid-radio-2">
Oranges
<p class="s-input-message">All oranges are currently <strong>out of stock</strong>.</p>
</label>
</div>
</div>
</div>
<div class="flex--item">
<div class="d-flex gs8 gsx has-success">
<div class="flex--item">
<input class="s-radio" type="radio" name="radio-valid-group" id="choice-valid-radio-3" />
</div>
<div class="flex--item">
<label class="d-block s-label fw-normal" for="choice-valid-radio-3">
Bananas
<p class="s-input-message">You’ve successfully selected the most amazing fruit in the world.</p>
</label>
</div>
</div>
</div>
</fieldset>
Which fruit do you like best?