@spectrum-web-components/combobox

Overview

An allows users to filter lists to only the options matching a query. It's composed of a textfield, a picker button, and child menu items.

$3


``
yarn add @spectrum-web-components/combobox
`

Import the side effectful registration of via:

`
import '@spectrum-web-components/combobox/sp-combobox.js';
`

When looking to leverage the Combobox base class as a type and/or for extension purposes, do so via:

`
import { Combobox } from '@spectrum-web-components/combobox';
`

$3

Combobox options are presented as a popup menu.
Menu items can be provided via markup as children, or by assigning an array to the options property of an .

#### Menu items via the options property

Instead of providing children, you can assign an array of ComboboxOptions to the options property, and will create matching menu items:

`html-no-demo



`

#### Menu items via dynamic options

When you replace the options Array, or add/remove children, the will detect that change and update its popup menu contents.
For example, using Lit:

`ts
render() {
return html;
}

mutate() {
this.colorOptions = [
...this.colorOptions,
{ value: 'purple', itemText: 'Purple' }
];
}
`

$3

#### Sizes


Small


`html

Red
Green
Blue

`


Medium


`html

Red
Green
Blue

`


Large


`html

Red
Green
Blue

`


Extra Large


`html

Red
Green
Blue

`

$3

`html
Color

Red
Green
Blue

`

#### Autocomplete

The text in an is editable, and the string the user has typed in will become the value of the combobox unless the user selects a different value in the popup menu.

##### None

autocomplete="none"

The suggested popup menu items will remain the same regardless of the currently-input value.
Whenever the currently-typed input exactly matches the value of a popup menu item, that item is automatically selected.

`html
Color

Red
Green
Blue

`

#### List

autocomplete="list"

The popup menu items are filtered to only those completing the currently-input value.

`html
Color

Red
Green
Blue

`

States


Disabled


`html
Color

Red
Green
Blue



Color

Red
Green
Blue

`


Invalid


`html
Color

Red
Green
Blue

Choose or add at least one color.


`


Pending


`html
Color

Red
Green
Blue

`

$3

#### Provide a label

A combobox must be labeled.
Typically, you should render a visible label via .
For exceptional cases, provide an accessible label via the label attribute.

`html
Color

Red
Green
Blue

`

#### Provide help text and tooltips in the correct location

It is not currently possible to provide accessible ARIA references between elements in different shadow roots. To ensure proper association between elements, help text must be included via the slot="help-text" or slot="negative-help-text" and tooltips must be included via the slot="tooltip".

See help text and tooltip for more information.


Help text


`html
Color

Red
Green
Blue
Enter the name of a color.

`


Negative help text


`html
Color

Red
Green
Blue
Enter the name of a color.
A color is required.

`


Tooltip


`html
Color


Color options, such as red, green, or blue.

Red
Green
Blue

`

#### Do not override keyboard navigation

The combobox supports both mouse and keyboard navigation.
Mobile behavior is currently unspecified.

When an is focused, pressing the down arrow moves focus to the first menu item in the popup menu.
The up and down arrows then move between available menu items.

The escape key dismisses the popup menu if open.
Otherwise, it clears the combobox's textfield.

The enter key sets the value of the focused .
If the popup menu is open, the value is set to the value` of the selected menu item, returning focus back to the combobox's textfield.

For comprehensive information on combobox accessibility, see WAI ARIA Authoring Practice Guide's Menu Button Pattern.