Components

Radio

sketch:Readyscss:Readyfigma:Ready
freemarker
:Ready
Usage
Code
Specs
Design

Basic implementation

Import

Import the settings and the radio scss files.

@import 'settings-tools/_all-settings';


@include import-font-families();


@import 'components/_c.radio';

Basic usage

To create a classic radio you have 3 main css classes to apply:

  • mc-radio on a div container
  • mc-radio__input on the input tag
  • mc-radio__label on the label tag
<div class="mc-radio">
  <input id="radio-01" type="radio" class="mc-radio__input" name="example" />
  <label for="radio-01" class="mc-radio__label">Radio button label</label>
</div>
Viewport: px 
<ul class="example">
  <li class="example__list-item">
    <div class="mc-radio">
      <input
        id="radio-01"
        type="radio"
        class="mc-radio__input"
        name="example"
      />
      <label for="radio-01" class="mc-radio__label">Radio button label</label>
    </div>
  </li>
</ul>

States

Depending on the context of use, the radio buttons can have several states:

  • checked
  • disabled
  • invalid
Viewport: px 
<ul class="example">
  <li class="example__list-item">
    <div class="mc-radio">
      <input
        id="radio-01"
        type="radio"
        class="mc-radio__input"
        name="mcradio"
      />
      <label for="radio-01" class="mc-radio__label">Radio button Default</label>
    </div>
  </li>
  <li class="example__list-item">
    <div class="mc-radio">
      <input
        checked
        id="radio-02"
        type="radio"
        class="mc-radio__input"
        name="mcradio"
      />
      <label for="radio-02" class="mc-radio__label">
        Radio button Checked
      </label>
    </div>
  </li>
  <li class="example__list-item">
    <div class="mc-radio">
      <input
        disabled
        id="radio-03"
        type="radio"
        class="mc-radio__input"
        name="mcradio"
      />
      <label for="radio-03" class="mc-radio__label">
        Radio button Disabled
      </label>
    </div>
  </li>
  <li class="example__list-item">
    <div class="mc-radio">
      <input
        id="radio-04"
        type="radio"
        class="mc-radio__input is-invalid"
        name="mcradio"
      />
      <label for="radio-04" class="mc-radio__label">
        Radio button Invalid
      </label>
    </div>
  </li>
</ul>

Implement as a group

Import

Import the settings, the radio and the fields scss files.

@import 'settings-tools/_all-settings';


@include import-font-families();


@import 'components/_c.radio';


@import 'components/_c.fields';

Note that the import order is important to get the right rendering of the component.

Group usage

To use the radio pattern in a group of elements in your form, you must use the following:

  • mc-field and the modifier mc-field--group on container (preferably use a fieldset tag)
  • mc-field__legend on the legend tag
  • mc-field__container on the wrapper of the set of radio elements
  • and mc-field__item in addition of the mc-radio class on the input tag:
<div class="example">
  <fieldset class="mc-field mc-field--group">
    <legend class="mc-field__legend">
      Legend
    </legend>


    <div class="mc-field__container">
      <div class="mc-radio mc-field__item">
        <input
          id="radio-01"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-01" class="mc-radio__label">
          Radio button label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-02"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-02" class="mc-radio__label">
          Radio button label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-03"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-03" class="mc-radio__label">
          Radio button label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-04"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-04" class="mc-radio__label">
          Radio button label
        </label>
      </div>
    </div>
  </fieldset>
</div>
Viewport: px 
<div class="example">
  <fieldset class="mc-field mc-field--group">
    <legend class="mc-field__legend">
      Group label
    </legend>


    <div class="mc-field__container">
      <div class="mc-radio mc-field__item">
        <input
          id="radio-01"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-01" class="mc-radio__label">
          Radio button label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-02"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-02" class="mc-radio__label">
          Radio button label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-03"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-03" class="mc-radio__label">
          Radio button label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-04"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-04" class="mc-radio__label">
          Radio button label
        </label>
      </div>
    </div>
  </fieldset>
</div>

Variations

Horizontal group

By default the radios elements are positioned vertically in the group.

If you wish, you can arrange the elements horizontally. To do so:

  • You add the modifier class mc-field__container--inline on the mc-field__container element

Note that the elements become horizontally aligned from the m-medium breakpoint (768px). Below this resolution, the elements are arranged vertically.

Viewport: px 
<div class="example">
  <fieldset class="mc-field mc-field--group">
    <legend class="mc-field__legend">
      Group label
    </legend>


    <div class="mc-field__container mc-field__container--inline">
      <div class="mc-radio mc-field__item">
        <input
          id="radio-01"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-01" class="mc-radio__label">
          Here is a very long label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-02"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-02" class="mc-radio__label">
          Radio label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-03"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-03" class="mc-radio__label">
          Here is a very long label
        </label>
      </div>
      <div class="mc-radio mc-field__item">
        <input
          id="radio-04"
          type="radio"
          class="mc-radio__input"
          name="mcradio"
        />
        <label for="radio-04" class="mc-radio__label">
          Radio label
        </label>
      </div>
    </div>
  </fieldset>
</div>

Behaviors

Help text

You have the possibility to define a help text when using radio buttons in a group.

For this you have to add a span with the mc-field__help class below the legend.

<legend class="mc-field__legend">
  Label
</legend>
<span id="helptext" class="mc-field__help">
  Help text
</span>
Viewport: px 
<div class="example">
  <div class="example__title">
    Default
  </div>


  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
      </legend>
      <span id="helptext" class="mc-field__help">
        Help text
      </span>


      <div class="mc-field__container">
        <div class="mc-radio mc-field__item">
          <input
            id="radio-01"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-01" class="mc-radio__label">
            Radio Label
          </label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-02"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-02" class="mc-radio__label">
            Radio Label
          </label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-03"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-03" class="mc-radio__label">
            Radio Label
          </label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-04"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-04" class="mc-radio__label">
            Radio Label
          </label>
        </div>
      </div>
    </fieldset>
  </div>


  <div class="example__title">
    Horizontal
  </div>


  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
      </legend>
      <span id="helptext" class="mc-field__help">
        Help text
      </span>


      <div class="mc-field__container mc-field__container--inline">
        <div class="mc-radio mc-field__item">
          <input
            id="radio-05"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-05" class="mc-radio__label">
            Radio Label
          </label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-06"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-06" class="mc-radio__label">
            Radio Label
          </label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-07"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-07" class="mc-radio__label">
            Radio Label
          </label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-08"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-08" class="mc-radio__label">
            Radio Label
          </label>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Requirement

When one or more elements of the group are mandatory, you must specify this to the user.

For this you have to add a span with the class mc-field__requirement right after the legend text.

<legend class="mc-field__legend">
  Legend
  <span class="mc-field__requirement">
    mandatory
  </span>
</legend>
Semantic rule

When one or more elements of the group are mandatory the required attribute must be added on the concerned radio button element

Viewport: px 
<div class="example">
  <div class="example__title">
    Default
  </div>


  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
        <span class="mc-field__requirement">
          mandatory
        </span>
      </legend>


      <div class="mc-field__container">
        <div class="mc-field__item mc-radio">
          <input
            required
            id="radio-01"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-01" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-field__item mc-radio">
          <input
            id="radio-02"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-02" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-field__item mc-radio">
          <input
            required
            id="radio-03"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-03" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-field__item mc-radio">
          <input
            id="radio-04"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-04" class="mc-radio__label">Radio Label</label>
        </div>
      </div>
    </fieldset>
  </div>


  <div class="example__title">
    Horizontal
  </div>


  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
        <span class="mc-field__requirement">
          mandatory
        </span>
      </legend>


      <div class="mc-field__container mc-field__container--inline">
        <div class="mc-radio mc-field__item">
          <input
            required
            id="radio-05"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-05" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-06"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-06" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            required
            id="radio-07"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-07" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-08"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-08" class="mc-radio__label">Radio Label</label>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Validation

Invalid

To indicate that one or more elements of the group are not valid, several steps are to be implemented:

  • Add the is-invalid class and the aria-invalid attribute to the concerned radio button element
  • You can add in addition a text detailing the error. This text must be added in a span with the class mc-field__error-message and positioned below the wrapper
Accessibility rules

If you use an error message you must comply with the following accessibility rules:

  • the span mc-field__error-message must always have an id
  • the aria-describedby attribute must be added on each concerned radio buttons elements and must refer to the id of the error message
Viewport: px 
<div class="example">
  <div class="example__title">
    Default
  </div>


  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
      </legend>


      <div class="mc-field__container">
        <div class="mc-field__item mc-radio">
          <input
            id="radio-01"
            type="radio"
            aria-describedby="err_1"
            class="mc-radio__input is-invalid"
            name="mcradio"
          />
          <label for="radio-01" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-field__item mc-radio">
          <input
            id="radio-02"
            type="radio"
            aria-describedby="err_1"
            class="mc-radio__input is-invalid"
            name="mcradio"
          />
          <label for="radio-02" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-field__item mc-radio">
          <input
            id="radio-03"
            type="radio"
            class="mc-radio__input"
            name="mcradio"
          />
          <label for="radio-03" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-field__item mc-radio">
          <input
            id="radio-04"
            type="radio"
            aria-describedby="err_1"
            class="mc-radio__input is-invalid"
            name="mcradio"
          />
          <label for="radio-04" class="mc-radio__label">Radio Label</label>
        </div>
      </div>


      <span id="err_1" class="mc-field__error-message">
        Error: A mistake has been made. Please try again.
      </span>
    </fieldset>
  </div>


  <div class="example__title">
    Horizontal
  </div>


  <div class="example__container">
    <fieldset class="mc-field mc-field--group">
      <legend class="mc-field__legend">
        Legend
      </legend>


      <div class="mc-field__container mc-field__container--inline">
        <div class="mc-radio mc-field__item">
          <input
            id="radio-05"
            type="radio"
            aria-describedby="err_1"
            class="mc-radio__input is-invalid"
            name="mcradiohorizontal"
          />
          <label for="radio-05" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-06"
            type="radio"
            aria-describedby="err_1"
            class="mc-radio__input is-invalid"
            name="mcradiohorizontal"
          />
          <label for="radio-06" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-07"
            type="radio"
            class="mc-radio__input"
            name="mcradiohorizontal"
          />
          <label for="radio-07" class="mc-radio__label">Radio Label</label>
        </div>
        <div class="mc-radio mc-field__item">
          <input
            id="radio-08"
            type="radio"
            aria-describedby="err_1"
            class="mc-radio__input is-invalid"
            name="mcradiohorizontal"
          />
          <label for="radio-08" class="mc-radio__label">Radio Label</label>
        </div>
      </div>


      <span id="err_1" class="mc-field__error-message">
        Error: A mistake has been made. Please try again.
      </span>
    </fieldset>
  </div>
</div>