Select¶
In order to use a select element on a page we have created a custom webcomponent with additional functionality making it easier to handle its operations. This element is <h-select> which internally makes use of a few additional webcomponents:
- h-select-toggler - used to render content inside it as a toggler
- h-options - used to enable specific events and functionality for navigating through a whole select options list
- h-option - used to enable specific events and functionality for navigating through individual options
- h-option-content - used to render content inside a select option
- h-select-close-btn - used to render a close button on mobile resolution for select
- h-select-search - used to render a search bar for select
This element also makes the use of h-dropdown and h-portal webcomponents. When there are more than 6 options to choose from, the search bar will be rendered in a form of <h-select-search> webcomponent.
Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.
Attributes¶
The <h-select> webcomponent accepts multiple attributes. Those attributes are:
| Attribute name | Type | Default | Description |
|---|---|---|---|
| control-id | string | '' | id of the select |
| control-name | string | '' | name of the select |
| multiple | boolean | false | if set to true select will appear as multiselect |
| opened | boolean | false | if set to true select will be initially opened |
| offset | number | 2 | position offset from toggler to the dropdown in pixels |
| error | boolean | false | if set to true select will appear in error theme |
| disabled | boolean | false | if set to true select will be initially disabled |
| required | boolean | false | if set to true select will be required |
DOM Events¶
This webcomponent listens to the following DOM events:
Example¶
<h-select control-name="example" control-id="1">
<h-select-toggler>
<span slot="placeholder">My select</span>
</h-select-toggler>
<h-option value="1" disabled>
<h-option-content>1 disabled</h-option-content>
</h-option>
<h-option value="2" hidden>
<h-option-content>2</h-option-content>
</h-option>
<h-option value="3">
<h-option-content>3</h-option-content>
</h-option>
</h-select>
<h-select class="select" control-name="example" control-id="1">
<label class="select__title label" for="1">My select</label>
<h-dropdown content-width="full" name="example" offset="2" direction="bottom-center">
<h-dropdown-toggler class="dropdown__toggler" name="example" tabindex="0" role="button" aria-expanded="false">
<h-select-toggler class="select-toggler" role="textbox" slot="toggler">
<span class="select-toggler__placeholder">My select</span>
<h-icon icon-name="icon-chevron-down">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
</svg>
</h-icon>
</h-select-toggler>
</h-dropdown-toggler>
<h-portal hidden disabled to="dropdown-portal">
<h-dropdown-content class="select__content dropdown__content" name="example" role="menu">
<h-select-close-btn
class="select__close-mobile-btn"
role="menuitem"
aria-label="close select"
tabindex="0"
>
<h-icon icon-name="icon-x" size="l">
<svg class="icon icon_l ">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
</svg>
</h-icon>
</h-select-close-btn>
<div class="select__label" role="menuitem">My select</div>
<h-options role="menuitem" tabindex="0" class="select__options">
<h-option class="select-option" value="1" tabindex="-1" role="option" disabled>
<h-option-content class="select-option__content">1 disabled</h-option-content>
</h-option>
<h-option class="select-option" value="2" tabindex="-1" role="option" hidden>
<h-option-content class="select-option__content">2</h-option-content>
</h-option>
<h-option class="select-option" value="3" tabindex="-1" role="option">
<h-option-content class="select-option__content">3</h-option-content>
</h-option>
</h-options>
<div role="menuitem"></div>
</h-dropdown-content>
</h-portal>
</h-dropdown>
</h-select>
Inner h-select components¶
We provide several components that can be used to create a fully functional select element. Some of the components will not be mentioned in the section below as they are added automatically while using the h-select components.
h-select-toggler¶
The h-select-toggler renders a toggler content using children that have a slot="placeholder" attribute. It can even be used standalone, separate from h-select.
Example¶
<h-select-toggler class="select-toggler" role="textbox" slot="toggler">
<span class="select-toggler__placeholder">Some placeholder</span>
<h-icon icon-name="icon-chevron-down">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
</svg>
</h-icon>
</h-select-toggler>
h-option¶
The h-option renders a select option inside it and enables some additional functionality. Its children should be wrapped in a <h-option-content> element described below. The h-option element takes a few attributes:
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | value of the select option |
| selected | boolean | false | if set to true the option will be initially selected |
| disabled | boolean | false | if set to true the option will be disabled |
| hidden | boolean | false | if set to true the option will be hidden |
| inactive | boolean | false | if set to true the option will be inactive |
| clickable | boolean | false | if set to true the option will be clickable even with the disabled parameter |
h-option-content¶
The h-option-content holds the content of a select option inside. It takes no attributes and has a class of select-option__content.
Example¶
<h-options role="menuitem" tabindex="0" class="select__options">
<h-option class="select-option" value="1" tabindex="-1" role="option">
<h-option-content class="select-option__content">1 disabled</h-option-content>
</h-option>
<h-option class="select-option" value="2" tabindex="-1" role="option" hidden>
<h-option-content class="select-option__content">2</h-option-content>
</h-option>
<h-option class="select-option" value="3" tabindex="-1" role="option">
<h-option-content class="select-option__content">3</h-option-content>
</h-option>
</h-options>