Components

Option button

scss:Readyfigma:Ready
Usage
Code

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
Viewport: px 
<div class="example">
  <div class="mc-option-group">
    <div class="mc-option-button">
      <input
        type="radio"
        name="option-group"
        value="madame"
        id="radio-02"
        class="mc-option-button__input"
        checked
      />
      <label class="mc-option-button__label" for="radio-02"> Content </label>
    </div>
    <div class="mc-option-button">
      <input
        type="radio"
        name="option-group"
        value="monsieur"
        id="radio-01"
        class="mc-option-button__input"
      />
      <label class="mc-option-button__label" for="radio-01"> Content </label>
    </div>
    <div class="mc-option-button">
      <input
        disabled
        type="radio"
        name="option-group"
        value="disabled"
        id="radio-03"
        class="mc-option-button__input"
      />
      <label class="mc-option-button__label" for="radio-03"> Content </label>
    </div>
  </div>
</div>

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
Viewport: px 
<div class="example">
  <div class="mc-option-group">
    <div class="mc-option-button">
      <input
        type="radio"
        name="option-group"
        value="madame"
        id="radio-02"
        class="mc-option-button__input"
        checked
      />
      <label class="mc-option-button__label" for="radio-02"> Content </label>
    </div>
    <div class="mc-option-button">
      <input
        type="radio"
        name="option-group"
        value="monsieur"
        id="radio-01"
        class="mc-option-button__input"
      />
      <label class="mc-option-button__label" for="radio-01"> Content </label>
    </div>
    <div class="mc-option-button">
      <input
        disabled
        type="radio"
        name="option-group"
        value="disabled"
        id="radio-03"
        class="mc-option-button__input"
      />
      <label class="mc-option-button__label" for="radio-03"> Content </label>
    </div>
  </div>
</div>

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;
    ...
  }