Dropdown

Import


@import 'settings-tools/all-settings';
@import 'components/c.select';
@import 'components/c.listbox';
@import 'components/c.dropdown';

Usage

The creation of a Dropdown component in your code is done using the following HTML structure:


<div class="mc-dropdown">
  <button
    type="button"
    id="trigger"
    class="mc-select mc-dropdown__trigger"
    aria-haspopup="listbox"
    title="Dropdown menu options"
    aria-expanded="false"
  >
    Placeholder
  </button>
  <!-- Insert here the Listbox structure -->
</div>

Variations

Depending on your use cases, you have the possibility to use the Dropdown component in its "mono-selection" version or in its "multi-selection" version.

The Dropdown component in its "mono-selection" version allows you to select only one value at a time within the listbox.

The Dropdown component in its "multi-selection" version allows you to select several values within the listbox.

Information

When using the component with a clear button, you must add the class mc-dropdown--clearable on the main mc-dropdown element to ensure that the trigger button and the clear button are displayed correctly.

States

Invalid

To indicate that the Dropdown component is in an invalid state, you have to add the is-invalid class to the mc-dropdown__trigger element.

Disabled

To disable the Dropdown component you have to add disabled attribut to the mc-dropdown__trigger element.

Behaviour

Warning
The dropdown navigation has to be done using javascript.
The clear button appears only when the users start to type or pick a value.