Advanced Multiple Custom Select

Custom select with advanced structure options and where multiple options can be selected.

How to

The Advanced Multiple Custom Select component is used to overwrite the multiple (native) select appearance and replace it with a custom list of selectable options.

List structure #

The custom list structure can be customized by modifying the content of the .js-adv-multi-select__list element.

<select> with <optgroup> elements #

The basic list structure (.js-adv-multi-select__list content) is:

<div role="group" describedby="optgroup-label">
  <!-- label -->
  <div class="adv-multi-select__label js-adv-multi-select__label" id="optgroup-label">{optgroup-label}</div>

  <!-- option -->
  <div class="adv-multi-select__option js-adv-multi-select__option" role="option">{option-label}</div>
</div>

where:

• .adv-multi-select__label is the label of the <optgroup> element; {optgroup-label} will be replaced by the <optgroup> label attribute;
• .adv-multi-select__option is the option element; {option-label} will be replaced by the <option> label.

The template used for the option elements can be customized based on your project needs. For example, if you want to include an image next to the option text, modify the template as follows:

<div role="group" describedby="optgroup-label">
  <!-- label -->
  <div class="adv-multi-select__label js-adv-multi-select__label" id="optgroup-label">{optgroup-label}</div>

  <!-- option -->
  <div class="adv-multi-select__option js-adv-multi-select__option" role="option">
    <img src="{img-src}" alt="{img-alt}">
    <span>{option-label}</span>
  </div>
</div>

To each <option> in the native <select> element, make sure to add a data-img-src and data-img-alt to pass the image src and alt attribute respectively:

<select multiple>
  <optgroup label="Group 1">
    <option value="1" data-img-src="image-1.png" data-img-alt="Image 1 Description">Option 1</option>
    <option value="2" data-img-src="image-2.png" data-img-alt="Image 2 Description">Option 2</option>
    <option value="2" data-img-src="image-3.png" data-img-alt="Image 3 Description">Option 3</option>
  </optgroup>
</select>

<select> with <option> element only #

The basic dropdown list (.js-adv-multi-select__list content) is:

<div class="adv-multi-select__option js-adv-multi-select__option" role="option">{option-label}</div>

You can customize this template (see <select> with <optgroup> elements section).

Reset selected options #

Optionally, you can include a reset button to deselect all the options. To do so, add the .js-advm-select-reset-btn class to the button and make sure the aria-controls value of the button is equal to the id value of the <select> element.

Pointing devices vs. touch devices #

The component behaves differently depending on wheter the user is on a touch device or not. 

If the user is on a touch device:

1.  The select options behave like checkboxes

If the user isn't on a touch device:

1. Hold shift to select two items along with all those in between
2. Hold Cmd (Ctrl on Windows) to select multiple items
3. Hold Cmd (Ctrl on Windows) to deselect item
4. Up/Down arrow keys to move the selection
5. Hold Cmd (Ctrl on Windows) + up/down arrow keys to move the focus, press spacebar to select focused element

Element width #

By default, the custom select is a block element and occupies the parent's full width. If you set the display property equal to inline-block, the width depends on the longest select option.

<div class="advm-select inline-block js-advm-select">
  <!-- ... -->
</div>

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗