Radio

Radio buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Sizes

Radios are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default, the medium radio is used.

Small

Medium

Large

<label class="qtm-radio qtm-small">
  <input type="radio" name="size" />
  <span>Small</span>
</label>

<label class="qtm-radio qtm-medium">
  <input type="radio" name="size" />
  <span>Medium</span>
</label>

<label class="qtm-radio qtm-large">
  <input type="radio" name="size" />
  <span>Large</span>
</label>

Selection

Radios can be checked by addingcheckedattribute.

Small

Medium

Large

<label class="qtm-radio qtm-small">
  <input type="radio" checked />
  <span>Small</span>
</label>

<label class="qtm-radio qtm-medium">
  <input type="radio" checked />
  <span>Medium</span>
</label>

<label class="qtm-radio qtm-large">
  <input type="radio" checked />
  <span>Large</span>
</label>

Colors

Radios are available in two colors. The default color is the primary color.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<label class="qtm-radio qtm-neutral"> ... </label> ...

Errors

Radios can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<label class="qtm-radio qtm-neutral qtm-error"> ... </label> ...

Disabled

Radios can also have a disable state.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<label class="qtm-radio qtm-disabled">
  <input type="radio" disabled />
  <span>Unchecked</span>
</label>
...

Custom labels

Radios accepts any component as its label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.

Option 1

This is some placeholder help text.

<label class="qtm-radio">
  <input type="radio" checked />
  <div>
    <span>Option 1</span>
    <p class="qtm-caption-1 text-bluegrey-500">
      This is some placeholder help text.
    </p>
  </div>
</label>
...

Radio Group

.qtm-radio-group is a helpful wrapper used to group radio elements.

Radio 1

Radio 2Radio 3

<div class="qtm-radio-group">
  <label class="qtm-radio">
    <input type="radio" name="radioGroup1" checked />
    <span>Radio 1</span>
  </label>

  <label class="qtm-radio">
    <input type="radio" name="radioGroup1" />
    <span>Radio 2</span>
  </label>

  <label class="qtm-radio">
    <input type="radio" name="radioGroup1" />
    <span>Radio 3</span>
  </label>
</div>

Sizes

.qtm-radio-group are available in three sizes that correspond to the different bottom margin values and size of their child elements. By default, the medium size is used.

SmallRadio 1Radio 2Radio 3MediumRadio 1Radio 2Radio 3LargeRadio 1Radio 2Radio 3

<div class="qtm-radio-group qtm-small">
  <label class="qtm-radio">
    <input type="radio" name="radioGroupSizeSmall" checked />
    <span>Radio 1</span>
  </label>
  ...
</div>
<div class="qtm-radio-group qtm-medium">...</div>
<div class="qtm-radio-group qtm-large">...</div>