Listbox

Import


@import 'settings-tools/all-settings';
@import 'components/c.checkbox'; // optional - to be imported when using the multiselection version
@import 'components/c.listbox';

Usage

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

Mono selection


<ul class="mc-listbox" role="listbox" tabindex="0">
  <li class="mc-listbox__tile" role="option">
    <input
      type="radio"
      name="monoSelection"
      id="monoItem1"
      class="mc-listbox__input"
      value="option1"
    />
    <label for="monoItem1" class="mc-listbox__label"> Option label n°1 </label>
  </li>
  <!-- ... -->
</ul>

Multi selection


<ul class="mc-listbox mc-listbox--multi" role="listbox" tabindex="0">
  <li class="mc-listbox__tile" role="option">
    <input
      type="checkbox"
      id="multiItem1"
      class="mc-listbox__input mc-checkbox__input"
      value="option1"
    />
    <label for="multiItem1" class="mc-listbox__label"> Option label n°1 </label>
  </li>
  <!-- ... -->
</ul>

Information

In order to facilitate the accessibility and the selection/transmission of values, the items of the Listbox component are constituted by default of the elements :

input[type="radio"] + label — for the mono-selection version
or input[type="checkbox"] + label — for the multi-selection version

Variations

Mono selection

This variation is mostly combined with direct action or with a dropdown component.

Useful tip

As mentioned before, in its basic structure, the component works with HTML input elements.
However, it may happen that you do not want to use input elements when implementing the component.
If this is the case, we provide you with the is-selected class which can be put on an li element to indicate the selected element.

Multi selection

In order to use the listbox with a multi selection, you must use checkboxes inside the li items. To do this, in addition to the mc-listbox__input class, you must add the mc-listbox__checkbox class to the checkbox elements.

Icons

To be more explicit, you may want to add an icon before the item label. To achieve that you have to add the class mc-listbox__icon to your icons.

Behaviour

Warning

The items states can only be manage by javascript.

Open

By default the listbox is set to be hidden.
To display the listbox, you have to add the is-open class to mc-listbox element.

Focus

To focus an item you have to add is-focus class to the mc-listbox__tile element.

Disabled

To disable an item you have to add is-disabled class to the mc-listbox__tile element and the disabled attribute on the input element.