Multiple Custom Select
Custom Select Input where multiple options can be selected.
Projects /
Custom Select Input where multiple options can be selected.
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).
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
}
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.
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: ': ';
}