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
wmSelectChanged event on
event.detail contains additional information, like the reference to the option the user clicked and the list of selected options. See the Events tabs for more information.
* Required property
Properties of the parent element
label-positionis set to
none(for accessibility reasons).
top | left | none
top. Set this property to
noneif no label should be displayed.
max-heightvalue for the options list. It takes any valid CSS value. Default is 12.5rem.
Properties of the children elements
Falseor the string
"false"selects the option. If not specified, the first option is selected.
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.
onBlurevent, which will not have the desired behavior.
event.detailis an object containing two keys:
optionChangedis the option which the user selected, and
selectedOptionsis an array of all the selected options (relevant with multiselect only).
Opens dropdown and focuses the selected option. If no option is
|Down Arrow||Opens dropdown and focuses option one down from the last option selected.|
|Up Arrow||Opens dropdown and focuses option one up from the first option selected.|
|Home||Moves focus to the first option.|
|End||Moves focus to the last option.|
Usage & API
- Only use wm-option's selected attribute for the initial selection. If you need to change the selected options, re-render the component.
- 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, but 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