Radio – Design Portal

The radio button is a selection control element, allowing the user to select one option from a set of several mutually exclusive options.

Demo

Default radio 1

Default radio 2

<div class="form-check">
  <input class="form-check__input" type="radio" id="formDefault1" checked name="formDemo">
  <label class="form-check__label" for="formDefault1">
    Default radio 1
  </label>
</div>
<div class="form-check">
  <input class="form-check__input" type="radio" id="formDefault2" name="formDemo">
  <label class="form-check__label" for="formDefault2">
    Default radio 2
  </label>
</div>

.form-check {
  display: inline-flex;
  column-gap: 0.5rem;
  min-block-size: 1.5rem;
  margin-block-end: 0.125rem;
  
  &__input {
    appearance: none;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    block-size: 1rem;
    border: 0.0625rem solid rgba(0, 0, 0, 0.25);
    color-adjust: exact;
    inline-size: 1rem;
    vertical-align: top;

    &[type="radio"] {
      border-radius: 50%;
      display: grid;
      place-items: center;
    }

    &:checked {
      background-color: var(--accent-1);
      border-color: var(--accent-1);

      &[type="radio"]:before {
        background-color: var(--white);
        block-size: 0.5rem;
        border-radius: 50%;
        content: "";
        display: inline-block;
        inline-size: 0.5rem;
        position: absolute;
      }
    }

    &:disabled {
      opacity: 0.5;
      pointer-events: none;

      ~ .form-check__label {
        opacity: 0.5;
      }
    }
  }

  &__label {
    display: inline-block;
  }
}

No JS! 😀

Note

Radio elements are not heavily prevalent in our unified themes, but this guide can be used as a reference for future themes.

States & Variations

Default

No attributes added to the input element.

Default radio 1

Default radio 2

<div class="form-check">
  <input class="form-check__input" type="radio" id="formDefault3" name="formDefault">
  <label class="form-check__label" for="formDefault3">
    Default radio 1
  </label>
</div>
<div class="form-check">
  <input class="form-check__input" type="radio" id="formDefault4" name="formDefault">
  <label class="form-check__label" for="formDefault4">
    Default radio 2
  </label>
</div>

Checked

An attribute of checked is added to the input element.

Checked radio 1

Checked radio 2

<div class="form-check">
  <input class="form-check__input" type="radio" id="formChecked1" name="formDefault">
  <label class="form-check__label" for="formChecked1">
    Checked radio 1
  </label>
</div>
<div class="form-check">
  <input class="form-check__input" type="radio" id="formDefault2" name="formDefault">
  <label class="form-check__label" for="formChecked2">
    Checked radio 2
  </label>
</div>

Disabled

An attribute of disabled is added to the input element.

Disabled radio 1

Disabled radio 2

<div class="form-check">
  <input class="form-check__input" type="radio" id="formDisabled1" name="formDisabled" disabled>
  <label class="form-check__label" for="formDisabled1">
    Disabled radio 1
  </label>
</div>
<div class="form-check">
  <input class="form-check__input" type="radio" id="formDisabled2" name="formDisabled" disabled>
  <label class="form-check__label" for="formDisabled2">
    Disabled radio 2
  </label>
</div>

Anatomy

Radio
Radio Checked
Radio Default
Radio Input
Radio Label