Radio - Astridd

Overview

Radio buttons are for selecting one option from a list of many and are predominantly used within forms. They are stacked vertically by default.

Examples

Static variation

Select an option

Option 1

Option 2

Option 3

<div class="radio">
  <fieldset>
    <legend>Select an option</legend>
    <div class="radio__group">
      <label for="formRadio-1" class="radio__label">
        Option 1
        <input type="radio" name="formRadio" id="formRadio-1" class="radio__field">
        <span class="radio__indicator"></span>
      </label>
    </div>
    <div class="radio__group">
      <label for="formRadio-2" class="radio__label is-invalid">
        Option 2
        <input type="radio" name="formRadio" id="formRadio-2" class="radio__field" required>
        <span class="radio__indicator"></span>
      </label>
    </div>
    <div class="radio__group">
      <label for="formRadio-3" class="radio__label">
        Option 3
        <input type="radio" name="formRadio" id="formRadio-3" class="radio__field">
        <span class="radio__indicator"></span>
      </label>
    </div>
  </fieldset>
</div>

Usage guidelines

Dos	Donts
Do use to present several options, of which a user can only one.	Don't use to present several options, of which the user can select one or multiple. Use 'Check boxes' instead.
Do create labels that clearly explain the option being selected.

Implementation guidelines

Name	Attribute	Description
Required	`required`	Radio gets considered as required. Apply to the `radio` element.