🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Advanced Custom Select

Custom Select with advanced structure options.

View Demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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.

The dropdown structure can be customized by modifying the content of 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 #

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us