Multiple Custom Select

Custom Select Input where multiple options can be selected.

Dependencies

• Radio Checkbox Buttons

How to

The Multiple Custom Select component is used to override the appearance of a native multiple select element and replace it with a custom control and dropdown with a list of checkboxes as options.

The vertical gap between the custom dropdown and the custom control is set using the --multi-select-dropdown-gap CSS custom property (deafult value is 4px).

Custom Button Trigger Appearance #

You can use the data-trigger-class attribute added to the .js-multi-select element to apply custom classes to the select control (.multi-select__button).

When the custom dropdown is open, the aria-expanded attribute of the custom control element is set to true. Additionally, the .multi-select__button--active class is added to the custom control when at least one option has been selected.

.multi-select__button[aria-expanded="true"] {
  // custom select control if dropdown = visible
}

.multi-select__button--active {
  // custom select control if at least one option has been selected
}

Custom Button Trigger Label #

You can add the following data attributes to the .js-multi-select element to modify the content of the custom button trigger:

• data-no-select-text: default button content if no options have been selected;
• data-update-text: you can set this to 'off' if you do not want to update the button content when options are selected (default is 'on');

If data-update-text is 'on' and a single option is selected, the button content is replaced with the text of the selected option.

If two or more options are selected, the button content is replaced with a custom string; this string can be set using the data-multi-select-text attribute:

<div data-multi-select-text="{n} options selected" class="multi-select js-multi-select">
  <select name="multiSelectThis" id="multiSelectThis" multiple>
    <option value="1">XXS</option>
    <!-- ... -->
  </select>
  
  
  <!-- ... -->
</div>

If present, {n} will be replaced with the number of selected options.

You can use the data-n-multi-select attribute if you want to show more that a single (selected) option in the button content.

For example, if data-n-multi-select="2", the button content is equal to data-multi-select-text if 3 or more options are selected.

Inset Label #

If you want the initial button content (data-no-select-text) always visible, set the data-inset-label to 'on' (see --inset-label variation).

The data-no-select-text is wrapped inside a .multi-select__term element, while the list of the selected options (or the data-multi-select-text) is wrapped in a .multi-select__details element.

You can use CSS to include custom separator between the two parts of the button content. For example, to include a ':' (as in the demo) you can:

// --inset-label
.multi-select__term + .multi-select__details::before {
  content: ': ';
}

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗