# auro-combobox The `auro-combobox` element provides users with a way to select an option from a list of filtered or suggested options based on user input. ## Properties | Property | Attribute | Modifiers | Type | Default | Description | |---------------------------------------|---------------------------------------|-----------|--------------------------------------------------|------------------|--------------------------------------------------| | [appearance](#appearance) | `appearance` | | `string` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. | | [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | | If declared, bib's position will be automatically calculated where to appear. | | [autocomplete](#autocomplete) | `autocomplete` | | `string` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. | | [behavior](#behavior) | `behavior` | | `'filter' \| 'suggestion'` | "'suggestion'" | Sets the behavior of the combobox, "filter" or "suggestion".
"filter" requires the user to select an option from the menu.
"suggestion" allows the user to enter a value not present in the menu options. | | [checkmark](#checkmark) | `checkmark` | | `boolean` | | When attribute is present auro-menu will apply check marks to selected options. | | [disabled](#disabled) | `disabled` | | `boolean` | | If set, disables the combobox. | | [dvInputOnly](#dvInputOnly) | `dvInputOnly` | | `boolean` | | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. | | [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. | | [format](#format) | `format` | | `string` | | Specifies the input mask format. | | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'" | Defines the screen size breakpointat which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.

When expanded, the dropdown will automatically display in fullscreen mode
if the screen size is equal to or smaller than the selected breakpoint. | | [inputValue](#inputValue) | | readonly | `string \| undefined` | | Returns the current value of the input element within the combobox. | | [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. | | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.
Otherwise, Heading 600 | | [layout](#layout) | `layout` | | `'classic' \| 'emphasized' \| 'snowflake'` | "'classic'" | Sets the layout of the combobox. | | [noFilter](#noFilter) | `noFilter` | | `boolean` | | If set, combobox will not filter menuoptions based on input. | | [noFlip](#noFlip) | `noFlip` | | `boolean` | | If declared, the bib will NOT flip to an alternate position
when there isn't enough space in the specified `placement`. | | [noValidate](#noValidate) | `noValidate` | | `boolean` | | If set, disables auto-validation on blur. | | [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. | | [onDark](#onDark) | `onDark` | | `boolean` | | DEPRECATED - use `appearance="inverse"` instead. | | [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement` | | Specifies the current selected option. | | [persistInput](#persistInput) | `persistInput` | | `boolean` | | If declared, selecting a menu option will not change the input value. By doing so,
the current menu filter will be preserved and the user can continue from their last
filter state. It is recommended to use this in combination with the `displayValue` slot. | | [placeholder](#placeholder) | `placeholder` | | `string` | | Define custom placeholder text, only supported by date input formats. | | [placement](#placement) | `placement` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. | | [required](#required) | `required` | | `boolean` | | Populates the `required` attribute on the input. Used for client-side validation. | | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. | | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. | | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. | | [setCustomValidityValueMissingFilter](#setCustomValidityValueMissingFilter) | `setCustomValidityValueMissingFilter` | | `string` | | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". | | [shift](#shift) | `shift` | | `boolean` | | If declared, the dropdown will shift its position to avoid being cut off by the viewport. | | [triggerIcon](#triggerIcon) | `triggerIcon` | | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. | | [type](#type) | `type` | | `string` | | Applies the defined value as the type attribute on `auro-input`. | | [typedValue](#typedValue) | `typedValue` | | `string` | | Specifies the value of the input element within the combobox. | | [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. | | [value](#value) | `value` | | `string` | | Value selected for the dropdown menu. | ## Methods | Method | Type | Description | |----------------------|----------------------------------------|--------------------------------------------------| | [clear](#clear) | `(): void` | Clears the current value of the combobox. | | [focus](#focus) | `(): void` | Focuses the combobox trigger input. | | [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. | | [isValid](#isValid) | `(): boolean` | Checks if the element is valid. | | [reset](#reset) | `(): void` | Resets component to initial state. | | [setMenuValue](#setMenuValue) | `(value: string): void` | Sets the menu value if menu is available.

**value**: The value to set on the menu. | | [showBib](#showBib) | `(): void` | Shows the dropdown bib if there are options to show. | | [updateActiveOption](#updateActiveOption) | `(index: number): void` | Updates the active option in the menu.

**index**: Index of the option to make active. | | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.

**force**: Whether to force validation. | ## Events | Event | Type | Description | |-----------------------------|--------------------------------------------------|--------------------------------------------------| | `auroCombobox-valueSet` | `CustomEvent` | (Deprecated) Notifies that the component has a new value set. | | `auroFormElement-validated` | | Notifies that the component value(s) have been validated. | | [input](#input) | `CustomEvent<{ optionSelected: any; value: any; }>` | Notifies that the component has a new value set. | | [inputValue](#inputValue) | `CustomEvent<{ value: string \| undefined; }>` | Notifies that the components internal HTML5 input value has changed. | ## Slots | Name | Description | |---------------------------|--------------------------------------------------| | | Default slot for the menu content. | | `ariaLabel.bib.close` | Sets aria-label on close button in fullscreen bib | | `ariaLabel.input.clear` | Sets aria-label on clear button | | `bib.fullscreen.headline` | Defines the headline to display above menu-options | | [displayValue](#displayValue) | Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts. | | [helpText](#helpText) | Defines the content of the helpText. | | [label](#label) | Defines the content of the label. | | [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. | ## Basic
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ## Property & Attribute Examples ### Appearance on Dark Backgrounds Use the `appearance="inverse"` attribute to apply styling appropriate for dark backgrounds.
Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Behavior There are two behaviors available for the combo box: `suggestion` and `filter`. The default behavior is `suggestion`. #### Suggestion With `behavior="suggestion"`, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` #### Filter With `behavior="filter"`, the menu options are displayed to the user, and the user is required to choose one of the menu options in order for the input to be considered valid. The `setCustomValidityValueMissingFilter` attribute is also available to display a custom message to the user when this validation check fails.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Checkmark on Selected Option Use the `checkmark` attribute to display a checkmark next to the selected option in the dropdown menu.
Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Customized Bib Position The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement`, and `shift` attributes. - `placement` specifies the preferred position where the bib should appear relative to the trigger. - `offset` sets the distance between the trigger and the bib. - When `autoPlacement` is enabled, smart positioning logic is applied to determine the best placement for the bib. If all sides have sufficient space, the bib will appear in the position specified by `placement`. - Unless `noFlip` is enabled, if there isn't enough space for the preferred `placement`, the bib will automatically flip to an alternative position. - `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
Bib Header Label bottom-end bib with 20px offset and noFlip Apples Oranges Peaches Grapes Cherries No matching option Bib Header Label bottom-end bib with 20px offset and flip Apples Oranges Peaches Grapes Cherries No matching option Bib Header Label right bib with 20px offset, noFlip and autoPlacement Apples Oranges Peaches Grapes Cherries No matching option Bib Header Label bottom-start bib with 20px offset, noFlip and shift Apples Oranges Peaches Grapes Cherries No matching option
See code ```html
Bib Header Label bottom-end bib with 20px offset and noFlip Apples Oranges Peaches Grapes Cherries No matching option Bib Header Label bottom-end bib with 20px offset and flip Apples Oranges Peaches Grapes Cherries No matching option Bib Header Label right bib with 20px offset, noFlip and autoPlacement Apples Oranges Peaches Grapes Cherries No matching option Bib Header Label bottom-start bib with 20px offset, noFlip and shift Apples Oranges Peaches Grapes Cherries No matching option
``` ### Disabled Use the `disabled` attribute to disable the combobox.
Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ```html Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` #### Error Using the `error` attribute with a given message sets a persistent error state (e.g. an error state returned from the server).
Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ```html Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ### Fullscreen Bib You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`. The default value of `fullscreenBreakpoint` is `sm`. Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens). To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Input Mode You can manually set the `inputmode` for the input.
Bib Header Name 1 2 3 4 5 No matching option
See code ```html Bib Header Name 1 2 3 4 5 No matching option ``` ### Layouts #### Emphasized Use `layout="emphasized"` to apply the emphasized style to the combobox. This layout is designed for use on light backgrounds.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar
Apples
Fruit
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar
Apples
Fruit
 ``` #### Snowflake Use `layout="snowflake"`, with `shape="snowflake"` and `appearance="inverse"` to apply the snowflake style to the combobox. This layout is designed for use on dark backgrounds.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar ``` ### Turn off Filtering If set, combobox will not do suggestion filtering of the menuoptions. This option is useful when the `` elements are being pre-filtered externally to combobox (e.g. using the citysearch API).
noFilter Combobox Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html noFilter Combobox Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Turn off Validation Set the `noValidate` attribute to disable auto-validation on blur. This is intended for use with the `required` attribute. By using these two attributes in combination, the validation for required fields is still computed for forms but no validation messaging will be generated in the UI.
noValidate Combobox Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
See code ```html noValidate Combobox Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ### Persistent Input The `persistInput` attribute allows you to set the combobox to persist the value of the input regardless of the current value set for the combobox. A persistent input is typically used in conjunction with display values to show the actual value of the selected option to the user when the input is not focused. This is helpful for things like dynamic menus where you want the user to be able to continue their search where they left off but display a full selected value when the input is not focused. **Note**: When using `persistInput` with the `required` attribute, you must also pass an error message for when there isn't a valid value but the user has typed something in the input to the `setCustomValidityValueMissing` attribute.
Persistant Input Persistant Input Apples
Apples
 Oranges
Oranges
 Peaches
Peaches
 Grapes
Grapes
 Cherries
Cherries
See code ```html Persistant Input Persistant Input Apples
Apples
 Oranges
Oranges
 Peaches
Peaches
 Grapes
Grapes
 Cherries
Cherries
 ``` ### Required Populates the `required` attribute on the input. Used for client-side validation.
Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ### Type When defined, the `auro-input` in the combobox trigger will use the defined `type`. These examples use the `triggerIcon` attribute to provide context to the user about the expected input type. #### Credit Card
Credit Card Credit Card Number 4000 0000 0000 0000 3400 000000 00000 3000 000000 0000 5000 0000 0000 0000 6000 0000 0000 0000 No matching credit card saved
See code ```html Credit Card Credit Card Number 4000 0000 0000 0000 3400 000000 00000 3000 000000 0000 5000 0000 0000 0000 6000 0000 0000 0000 No matching credit card saved ``` #### Month-Day-Year
Date Combobox Header Date 01/02/2020 05/16/2022
See code ```html Date Combobox Header Date 01/02/2020 05/16/2022 ``` ### Value Use the `value` attribute to programmatically set the value of the combobox.
Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ## Method Examples ### Focus The `focus()` method will apply focus state to the combobox input field.
Apply focus to combobox

Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Apply focus to combobox

Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ```js export function focusExample() { const focusExample = document.querySelector('#focusExample'); const focusExampleBtnElem = document.querySelector('#focusExampleBtn'); focusExampleBtnElem.addEventListener('click', () => { focusExample.focus(); }); } ``` ### Reset Use the `reset()` method to reset the ``'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
Reset

Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Reset

Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ```js export function resetStateExample() { const elem = document.querySelector('#resetStateExample'); document.querySelector('#resetStateBtn').addEventListener('click', () => { elem.reset(); }); } ``` ### Updating Externally The `updateActiveOption` method allows you to programmatically set which menu option is active/highlighted. This is useful for situations like matching IATA codes (sea -> SeaTac airport). The method accepts an index parameter representing the position of the option to make active in the menu.

Type an IATA code (sea, lax, jfk, ord, sfo) to highlight the matching airport.

Close combobox Clear All Select an Airport Airport SEA - Seattle-Tacoma International LAX - Los Angeles International JFK - John F. Kennedy International ORD - O'Hare International SFO - San Francisco International No matching airport Start typing an airport code to see it highlighted
See code ```html

Type an IATA code (sea, lax, jfk, ord, sfo) to highlight the matching airport.

Close combobox Clear All Select an Airport Airport SEA - Seattle-Tacoma International LAX - Los Angeles International JFK - John F. Kennedy International ORD - O'Hare International SFO - San Francisco International No matching airport Start typing an airport code to see it highlighted ``` ```js export function setupExternalSelectionExample() { const combobox = document.getElementById('externalSelectionExample'); const iataCodes = ['sea', 'lax', 'jfk', 'ord', 'sfo']; combobox.addEventListener('input', () => { const input = combobox.inputValue?.toLowerCase(); const matchIndex = iataCodes.indexOf(input); if (matchIndex !== -1) { combobox.updateActiveOption(matchIndex); } }); } ``` ## Slot Examples ### Custom Display Value You can fully customize how selected values appear by using the `displayValue` slot. This slot allows you to pass in any HTML content. Only the `snowflake` and `emphasized` layouts are supported.
Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
Custom display value
Any html can be used
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
Custom display value
Any html can be used
 ``` ### Custom Optional Label The `` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
Bib Header Name - optional Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Bib Header Name - optional Apples Oranges Peaches Grapes Cherries No matching option ``` ### Help Text Sets the help text displayed below the trigger. The `helpText` slot can be used to provide additional context for the combobox. When using the `error` property, the `helpText` slot can be used to describe the error.
Bib Header Name Custom help text Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
See code ```html Bib Header Name Custom help text Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ## Common Usage Patterns & Functional Examples ### Static Menu Options when No Match This example demonstrates a combobox populated with a static menu option that appears when there is not an option that matches the user's input. Use the ``'s `static` and `nomatch` attributes to achieve this behavior.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Custom Bib Height This example shows how to set a custom height for the bib from ``. Custom height dimensions are set by applying a `max-height` rule and value on the ``.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries Strawberries Blueberries Raspberries Blackberries Cranberries Bananas No matching option
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries Strawberries Blueberries Raspberries Blackberries Cranberries Bananas No matching option ``` ### Airports example Combobox populated with airport options.
Airports Name glacier park international san francisco international gowen field lambert st louis international kelowna international yakima air terminal pullman moscow regional edmonton international tampa international minneapolis st paul international idaho falls regional airport rogue valley international palm springs international guanacaste airport oakland international logan international thurgood marshall international dallas love field santa barbara municipal kansas city international kona international licenciado gustavo diaz ordaz international wrangell deadhorse loreto international nome dwight d eisenhower national philadelphia international dallas fort worth international indianapolis international sacramento international rocky gutierrez unalaska merle mudhole smith james a johnson nashville international spokane international ketchikan international pittsburgh international san luis obispo regional hollywood burbank louis armstrong international paine field cincinnati northern kentucky international yakutat portland international ted stevens seattle tacoma international san diego international san antonio international fresno yosemite international austin bergstrom international ohare international guadalajara international san jose international juneau international roberts field charles m schulz fairbanks international raleigh durham international eppley airfield bozeman yellowstone international ontario international kahului international friedman memorial general rafael buelna international dillingham kodiak denver international manzanillo international los cabos international el paso international airport hartsfield jackson international los angeles international southwest florida international cleveland hopkins international airport ralph wien memorial philip sw goldson international airport pangborn memorial detroit metropolitan bethel ronald reagan national reno tahoe international wiley post will rogers monterey regional honolulu international will rogers world washington dulles international miami international bellingham international helena regional great falls international ixtapa zihuatanejo international calgary international john wayne fort lauderdale hollywood international newark liberty international yampa valley regional tri cities tucson international albuquerque international sunport john f kennedy international vancouver international juan santamaria international harry reid international airport lihue international missoula international walla walla regional milwaukee mitchell international mahlon sweet field king salmon cancun international redding municipal airport orlando international salt lake city international sky harbor international billings logan international gustavus adak cincinnati northern kentucky international jackson hole airport john glenn columbus international victoria international charleston international george bush intercontinental Unknown airport...
See code ```html Airports Name glacier park international san francisco international gowen field lambert st louis international kelowna international yakima air terminal pullman moscow regional edmonton international tampa international minneapolis st paul international idaho falls regional airport rogue valley international palm springs international guanacaste airport oakland international logan international thurgood marshall international dallas love field santa barbara municipal kansas city international kona international licenciado gustavo diaz ordaz international wrangell deadhorse loreto international nome dwight d eisenhower national philadelphia international dallas fort worth international indianapolis international sacramento international rocky gutierrez unalaska merle mudhole smith james a johnson nashville international spokane international ketchikan international pittsburgh international san luis obispo regional hollywood burbank louis armstrong international paine field cincinnati northern kentucky international yakutat portland international ted stevens seattle tacoma international san diego international san antonio international fresno yosemite international austin bergstrom international ohare international guadalajara international san jose international juneau international roberts field charles m schulz fairbanks international raleigh durham international eppley airfield bozeman yellowstone international ontario international kahului international friedman memorial general rafael buelna international dillingham kodiak denver international manzanillo international los cabos international el paso international airport hartsfield jackson international los angeles international southwest florida international cleveland hopkins international airport ralph wien memorial philip sw goldson international airport pangborn memorial detroit metropolitan bethel ronald reagan national reno tahoe international wiley post will rogers monterey regional honolulu international will rogers world washington dulles international miami international bellingham international helena regional great falls international ixtapa zihuatanejo international calgary international john wayne fort lauderdale hollywood international newark liberty international yampa valley regional tri cities tucson international albuquerque international sunport john f kennedy international vancouver international juan santamaria international harry reid international airport lihue international missoula international walla walla regional milwaukee mitchell international mahlon sweet field king salmon cancun international redding municipal airport orlando international salt lake city international sky harbor international billings logan international gustavus adak cincinnati northern kentucky international jackson hole airport john glenn columbus international victoria international charleston international george bush intercontinental Unknown airport... ``` ### Dynamically Set Value Use the `value` attribute in combination with another element to dynamically set the value of the combobox. Can be used in the following ways: * Preset the value of the combobox to valid menu option * Set the value of the combobox to invalid menu option * Reset the value of the combobox to undefined Note: using a value that does not match a menu option will reset the combobox value to undefined.
Set to an existing option Set to custom value Reset

Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option
See code ```html Set to an existing option Set to custom value Reset

Bib Header Name Apples Oranges Peaches Grapes Cherries Prefer Alaska No matching option ``` ```js export function valueExample() { const valueExample = document.querySelector('#valueExample'); document.querySelector('#valueValidExampleBtn').addEventListener('click', () => { valueExample.value = 'Oranges'; }); document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => { valueExample.value = 'Dragon Fruit'; }); document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => { valueExample.value = undefined; }); } ``` ### In Dialog Example use of component within an `auro-dialog`.
Combobox in Dialog Combobox in Dialog
Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html
Combobox in Dialog Combobox in Dialog
Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
``` ```js export function inDialogExample() { document.querySelector("#combobox-dialog-opener").addEventListener("click", () => { const dialog = document.querySelector("#combobox-dialog"); dialog.open = true; }); }; ``` ### Persistent Menu Option with a Custom Event This example demonstrates a static menu option that will always appears regardless of the suggestion filtering performed. In this example "Add new address" will always be a displayed menu option.
Address Combobox Address 555 Address Way Seattle, WA 99999 333 Some Street Seattle, WA 99999 Add new address
See code ```html Address Combobox Address 555 Address Way Seattle, WA 99999 333 Some Street Seattle, WA 99999 Add new address ``` ```js export function persistentExample() { const persistentExample = document.querySelector('#persistent'); persistentExample.addEventListener('addNewAddress', () => { console.warn('addNewAddress event fired'); alert(`addNewAddress event fired`); }); } ``` ### Swapping Values Between Comboboxes This example illustrates using a JavaScript function attached to an auro-button component click event to swap the values of two `auro-combobox` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.
Left Combobox Header Name Apples Oranges Peaches Grapes Cherries No matching option Right Combobox Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html
Left Combobox Header Name Apples Oranges Peaches Grapes Cherries No matching option Right Combobox Header Name Apples Oranges Peaches Grapes Cherries No matching option
``` ```js export function swapValueExample() { const btn = document.querySelector('#swapExampleBtn'); const comboboxOne = document.querySelector('#swapExampleLeft'); const comboboxTwo = document.querySelector('#swapExampleRight'); btn.addEventListener('click', () => { const valueOne = comboboxOne.value; const valueTwo = comboboxTwo.value; comboboxOne.value = valueTwo; comboboxTwo.value = valueOne; }); } ```