Select
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).
Action Menu's selector variant.
NB: If you want to implement a dropdown where activating an item triggers an action, please see theTechnical overview
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 wm-select
. 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 wm-select
string
label-position
is set to none
(for
accessibility reasons).
string
boolean
string
boolean
top | left | none
top
. Set this property to none
if
no label should be displayed.
string
max-height
value for the options
list. It takes any valid CSS value. Default is 12.5rem.
boolean
string
boolean
boolean
string
boolean
Properties of the children elements wm-option
boolean
boolean
False
or the string "false"
selects the
option. If not specified, the first option is selected.
string
Usage in HTML
Edit the code below to see changes reflected in the example above.
Javascript Sample
Example code for functionality.
Usage in Elm
Code generated from HTML.
onBlur
event, which will not have the desired behavior.
event.detail
is an object containing two keys: optionChanged
is the option which the user selected, and selectedOptions
is an array of all the selected options (relevant with multiselect only).
Deprecated properties
wmSelectChanged
.
wmSelectBlurred
.
Keyboard Support
Button
Key | Function |
---|---|
Space Enter |
Opens dropdown and focuses the selected option. If no option is
selected , the first option is selected by default.
|
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. |
Dropdown Listbox
Key | Function |
---|---|
Space |
|
Enter |
|
Escape |
|
Up Arrow |
|
Down Arrow |
|
Home | Moves focus to the first option. |
End | Moves focus to the last option. |
A-Z |
|
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:
- None
- Select an option
- --