Accessible Web Components

Dropdown Selector


The dropdown selector is a form input that can be used to in place of a native select element in single mode.

Work in progress

I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.


Under construction

Example usage

<form id="form" method="get">
<label for="dropdown-selector">Choose a month</label>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5" selected>June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>


If a label has been associated to the dropdown-selector, then clicking on the label will open the list of options for the selector.

Keyboard navigation is also available. The element is focusable with tab.

When closed

When open

Screen readers

Screen reader users will be informed that they have focused a combobox, along with the label associated with the dropdown-selector, and that it can open a listbox with options.

On opening the listbox, the user will be informed of how many items are in the list and what the current setting is, and as they use the keyboard to navigate up and down the list, they will be told which option they are hovering over.


The following attributes can be used on the dropdown-selector element:

When present, automatically focus this dropdown-selector on page load.
When present, makes the dropdown-selector not mutable, focusable, and prevents it from being submitted with the form.
The ID of the form that this dropdown-selector is attached to. If it is not set, then the dropdown-selector is attached to the closest form ancestor.
The name of the dropdown-selector used when submitting.
When present, determines if the dropdown-selector must have a value.
Sets where the dropdown-selector participates in sequential keyboard navigation.
The value of the dropdown-selector.

Form data

The dropdown-selector can be used in forms, and its name/value pair will be included in the GET or POST data submitted by its associated form.


The following methods and properties can be called/access on the dropdown-selector element:

closeList(boolean: keepFocus = true)
Closes the list if it is open. If keepFocus is set to true, then the list will keep focus.
Opens the list and sets focus if the list is not already open.
select(number: index)
Sets the selected index of the dropdown-selector.
add(HTMLElement: item, HTMLElement|number: before = null)
Adds an item to the dropdown-selector. If before is null, then the new item will be appended to the end of the current list. If before is another item or a number, it will insert the new item before the specified item.
item(number: index)
Returns the item in the dropdown-selector at index.
namedItem(string: name)
Returns the item in the dropdown-selector that has a matching name or id attribute. If there is no matching item, it returns null
remove(number: index = null)
Removes the item from the dropdown-selector at the specified index. If no index, then this will remove the dropdown-selector from its parent.
Set/unset the dropdown-selector's autofocus attribute.
The dropdown-selector's disabled attribute.
The dropdown-selector's form attribute.
The dropdown-selector's autofocus attribute.
labels (readonly)
Returns a NodeList of the label elements associated with the dropdown-selector.
length (readonly)
Returns the number of items in the dropdown-selector
The dropdown-selector's name attribute.
options (readonly)
Returns a NodeList of options from the dropdown-selector.
The dropdown-selector's required attribute.
selectedIndex (readonly)
Returns the selected index of the dropdown-selector.
selectedOptions (readonly)
Returns a nodeList of options that are currently selected in the dropdown-selector. This list should not contain more than one option, as only one option can be selected at a time.
The dropdown-selector's tabIndex attribute.
The dropdown-selector's value attribute.

More information