<select> element is a control that allows the user to select from a set of potential options.
::host — Root element that contains the button and the pop-up.
::part-button — An interactive element that toggles the appearance of the pop-up. This element has a tab stop.
::part-pop-up — An interactive element containing the set of options the user can select from.
::host Listening for
toggle-pop-up event to hide/show
::part-button Listens to
click event and dispatches
::part-button Listening for
option-change event to update selected value shown
::part-pop-up Listening for
option-change event to dispatch
::part-button Dispatches custom event
Keyboard users can operate the
<select> as follows:
<select>element using the
Tabkey (there is a tab stop on
part-button). The control can be focused by default by setting the
Enterkey or the
Spacekey. The popup can be dismissed using the
Enterkey or the
valuefield is updated to the respective option's
Placeholder for now, dependent on standardization on parts definitions.
open (bool): Controls whether the dropdown is open.
defaultOpen (bool): The initial value for
open. Defaults to false.
value (string): The currently selected option.
multiple (bool): Controls whether the user should be able to select multiple items. Defaults to false.
searchable (bool): Controls whether the list of options can be searched. If true, a search field is added to the element, and the list of options is filtered by value (matching on prefix, case insensitive) unless overridden by onSearch. Defaults to false.
onSearch (function): Callback function fired when the search input changes (
searchable must be enabled).
onSelect (function): Callback function fired when the selected option changes.
popupDirection (enum: auto | above | below): Specify the direction the options list should pop up towards.
"Auto" is the behavior of
<select> today (pop up in the direction with the most screen real estate).
repeatScroll (bool): Specify whether, while using arrow keys, the menu should scroll back to the first option after reaching the last option.
autofocus (bool): Get focus by default.
autocomplete (string): Provides a hint for the user agent's autocomplete feature.
disabled (bool): Prevents the user from interacting with the control. Defaults to false.
form (string): Associates the element with a form in the document whose
id is this value.
name (string): Specify the name of the control for purposes of form submission.
required (bool): Indicates that an option with a non-empty string value must be selected.
size (number): If the control is displayed inset (e.g. in
multiple mode), specify the number of options
that should be visible.
disabled (bool): Prevents the user from selecting this option. Defaults to false.
selected (bool): Indicates that this option is initially selected (overrides the default of the first option being initially selected).
label (string): Label indicating the meaning of the option.
value (string): The option's associated value (e.g. to be submitted with a form).
disabled (bool): Prevents the user from selecting any options in this option group. Defaults to false.
label (string): Label for the group of options.