Advanced Custom Select

Custom Select with advanced structure options.

Dependencies

• Popover

How to

The Advanced Custom Select component is used to overwrite the native select appearance and replace it with a custom control and a custom dropdown.

Dropdown structure #

The dropdown content is determined by the .js-adv-select element, while its appearance can be customized via the .js-adv-select-popover element.

<select> with <optgroup> elements #

The basic dropdown structure (.js-adv-select-popover content) is:

<div class="adv-select-popover__optgroup" role="group" describedby="optgroup-label">
  <div class="adv-select-popover__label" id="optgroup-label">{optgroup-label}</div>
  <div class="adv-select-popover__option" role="option">{option-label}</div>
</div>

where:

• .adv-select-popover__label is the label of the <optgroup> element; {optgroup-label} will be replaced by the <optgroup> label attribute;
• .adv-select-popover__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 class="adv-select-popover__optgroup" role="group" describedby="optgroup-label">
  <div class="adv-select-popover__label" id="optgroup-label">{optgroup-label}</div>
  <div class="adv-select-popover__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>
  <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> elements only #

If you don't need optgroups, the basic dropdown structure (.js-adv-select-popover content) is:

<div class="adv-select-popover__option" role="option">{option-label}</div>

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

Control Button #

The .js-adv-select__control button is the dropdown control element. Its aria-controls attribute needs to be equal to the id of .js-adv-select-popover element.

When an option in the dropdown is selected, the content of its child .js-adv-select__value element is updated with the selected option content.

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗