Radio

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Basic implementation

Import

Import the settings and the radio scss files.


@import 'settings-tools/all-settings';
@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>

States

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

checked

disabled

invalid

Implement as a group

Import

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


@import 'settings-tools/all-settings';
@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>

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.

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>

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

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