This component provides a dropdown list of options, similar to the HTML select element. It displays the selected option(s) when the dropdown is closed.
Several variants are available. Single Select (the default), multiselect, which has an optional "Select All" button, and a search field to filter the options (which can be used with both single and multiselect).
NB: If you want to implement a dropdown where activating an item triggers an action, please see the Action Menu's selector variant.
The component should be used exclusively with the
wm-option component, which represent the options.
To use the component, listen to the
wmOptionDeselected events. The
event.detail contains a reference to the option the user clicked, which can then be used to change the option's
* Required property
Properties of the parent element
none (for accessibility reasons).
top | left | none
top. Set this property to
none if no label should be displayed.
max-height value for the options list. It takes any valid CSS value. Default
Properties of the children elements
False or the string
"false" selects the option.
Usage in HTML
Edit the code below to see changes reflected in the example above.
Example code for functionality.
Usage in Elm
Code generated from HTML.
onBlur event, which will not have the desired behavior.
Properties of the children
event.detail contains a reference to the option which the user
event.detail contains a reference to the option which the
Opens dropdown and focuses the selected option. If no option is
selected, the first option is selected by default.
|Opens dropdown and focuses option one down from the last option selected.
|Opens dropdown and focuses option one up from the first option selected.
|Moves focus to the first option.
|Moves focus to the last option.
Usage & API
- The Select with Search variants are intended to be used with 50 or fewer options. Any more present usability and potential performance issues. Designs that call for a Select with Search with more than 50 options should consider an alternate pattern.
Single Select's "placeholder"
Single Select doesn't have a placeholder, and must always have a selected option. Most of the time this UX pattern requires a "special" first option, otherwise we have no way to know whether the user selected the first option or didn't make a selection at all. You may use the first option as a null value to resolve this issue. In this case, for accessibility and consistency reasons, the language should be limited to one of the following:
- Select an option