Option button

Import

Import the settings and the option-button scss files.


@import 'settings-tools/all-settings';
@import '_c.option-button'; // mandatory

Usage

The creation of an option-button component in your code is done using the following HTML structure:


<div class="mc-option-button">
  <input
    type="radio"
    name="option-button"
    value="radio-01"
    id="radio-01"
    class="mc-option-button__input"
  />
  <label class="mc-option-button__label" for="radio-01"> Content </label>
</div>

States

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

unchecked
checked
disabled

Width

The Option button component width can either fit its content or its container. To achieve that, you have to apply the mc-option-button--full modifier to the mc-option-button element.

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

unchecked
checked
disabled

Implement as a group

In order to group and organize a list of option-button you must wrap them in a HTML element using mc-option-group class.

This class has to be define in the user environment. In fact we let the end-user choose the layout that suit their needs. For example, you can use it with flexbox.


  .mc-option-group {
    display: flex;
    justify-content: space-between | space-evenly;
    ...
  }