# auro-select The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control. ## Properties | Property | Attribute | Type | Default | Description | |---------------------------------|---------------------------------|--------------------------------------------------|------------------|--------------------------------------------------| | [appearance](#appearance) | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. | | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | false | If declared, bib's position will be automatically calculated where to appear. | | [autocomplete](#autocomplete) | `autocomplete` | `string` | | If declared, sets the autocomplete attribute for the select element. | | [disabled](#disabled) | `disabled` | `boolean` | | When attribute is present, element shows disabled state. | | [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. | | [flexMenuWidth](#flexMenuWidth) | `flexMenuWidth` | `boolean` | | If declared, make the width of the bib match the width of the content, rather than the trigger. | | [fluid](#fluid) | `fluid` | `boolean` | | When attribute is present, element will be 100% width of container element. | | [forceDisplayValue](#forceDisplayValue) | `forceDisplayValue` | `boolean` | false | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. | | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'" | Defines the screen size breakpoint at 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. | | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.
Otherwise, Heading 600. | | [layout](#layout) | `layout` | `'classic' \| 'emphasized' \| 'snowflake'` | "'classic'" | Determines the overall layout of the select component. | | [matchWidth](#matchWidth) | `matchWidth` | `boolean` | false | If declared, the popover and trigger will be set to the same width. | | [multiSelect](#multiSelect) | `multiselect` | `boolean` | | Sets multi-select mode, allowing multiple options to be selected at once. | | [name](#name) | `name` | `string` | | The name for the select element. | | [noCheckmark](#noCheckmark) | `noCheckmark` | `boolean` | | When true, checkmark on selected option will no longer be present. | | [noFlip](#noFlip) | `noFlip` | `boolean` | false | 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\|Array` | | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array` when `multiSelect` is true. | | [placeholder](#placeholder) | `placeholder` | `string` | | Define custom placeholder text. | | [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 element. 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`. | | [shape](#shape) | `shape` | `'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'snowflake'` | | Determines the shape of the dropdown bib. | | [shift](#shift) | `shift` | `boolean` | false | If set, the dropdown will shift its position to avoid being cut off by the viewport. | | [size](#size) | `size` | `'lg' \| 'xl'` | | Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`. | | [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. | | [value](#value) | `value` | `string` | | Value selected for the component. | ## Methods | Method | Type | Description | |----------------------|----------------------------------------|--------------------------------------------------| | [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. | | [reset](#reset) | `(): void` | Resets component to initial state. | | [setMenuValue](#setMenuValue) | `(value: any): void` | | | [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 | |-----------------------------|--------------------------------------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. | | `auroSelect-valueSet` | `CustomEvent` | Notifies that the component has a new value set. | | [input](#input) | `CustomEvent<{ optionSelected: any; value: any; }>` | Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object. | ## Slots | Name | Description | |---------------------------|--------------------------------------------------| | | Default slot for the menu content. | | `ariaLabel.bib.close` | Sets aria-label on close button in fullscreen bib | | `bib.fullscreen.headline` | Defines the headline to display above menu-options | | [displayValue](#displayValue) | Allows custom HTML content to display the selected value when select is not focused. | | [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. | | [valueText](#valueText) | Dropdown value text display. | ## CSS Shadow Parts | Part | Description | |-------------------|--------------------------------------------------| | [dropdownChevron](#dropdownChevron) | Apply CSS to the collapsed/expanded state icon container. | | [dropdownSize](#dropdownSize) | Apply size styles to the dropdown bib (height, width, maxHeight, maxWidth only). | | [dropdownTrigger](#dropdownTrigger) | Apply CSS to the trigger content container. | | [helpText](#helpText) | Apply CSS to the help text. | ## Basic
Close Popup Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Close Popup Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska ``` ## Property & Attribute Examples ### Appearance on Dark Backgrounds Use the `appearance="inverse"` attribute to render the component for use on dark backgrounds.
Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska ``` ### Autocomplete Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
First Name First Name Last Name Last Name
Street Address Street Address City City Select Your State Select Your State Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming
See code ```html
First Name First Name Last Name Last Name
Street Address Street Address City City Select Your State Select Your State Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming
``` ### Disabled Use the `disabled` attribute to toggle the disabled UI.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ```
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ### Error Use the `error` attribute to toggle the error UI.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ```
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ### Flex Menu Width Use the `flexMenuWidth` boolean attribute to toggle the width of the `` element to match the width of the bib content, rather than the width of the trigger.
Bib Headline Label United States has a country code of (+1) Costa Rica has a country code of (+506) Mexico has a country code of (+52) Afghanistan has a country code of (+93) Albania has a country code of (+355)
See code ```html Bib Headline Label United States has a country code of (+1) Costa Rica has a country code of (+506) Mexico has a country code of (+52) Afghanistan has a country code of (+93) Albania has a country code of (+355) ``` ### Dropdown with 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**.
Select Example Bib Headline Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Select Example Bib Headline Stops Price Duration Departure Arrival Prefer Alaska ``` #### Disabled Fullscreen Bib This example overrides the default dropdown behavior to force a non-fullscreen view on any screen size. `disabled` ensures that the dropdown will never be fullscreen. Please use `xl` if you want the opposite behavior, where a dropdown is always fullscreen.
Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska ``` ### Shape | Size | Layout Support The `auro-select` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `layout="classic"`, `shape="classic"` and `size="lg"`. #### Classic Layout (Legacy) The `classic` layout is default for `auro-select`. No customization is needed to achieve this look.
Close Popup Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Close Popup Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska ``` #### Emphasized Layout The `emphasized` layout is only supported on light backgrounds. The `emphasized` layout supports the following shapes: - `pill` - `pill-left` - `pill-right` The `emphasized` layout supports the following sizes: - `xl`
Close Popup Select Example Flights Cars Hotels Packages Cruises Select Example Flights Cars Hotels Packages Cruises Select Example no displayValue in menuoptions Flights Cars Hotels Packages Cruises
See code ```html
Close Popup Select Example Flights Cars Hotels Packages Cruises Select Example Flights Cars Hotels Packages Cruises Select Example no displayValue in menuoptions Flights Cars Hotels Packages Cruises
``` #### Snowflake Layout The `snowflake` layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example. The `snowflake` layout is only expected to be used on dark backgrounds, in conjunction with `appearance="inverse"`.
Close Popup Label Help Text Flights Cars Hotels Packages Cruises
See code ```html Close Popup Label Help Text Flights Cars Hotels Packages Cruises ``` ### Multi-Select Sets multi-select mode, allowing multiple options to be selected at once.
Bib Headline multiselect select example Option 1 Option 2 Option 3
See code ```html Bib Headline multiselect select example Option 1 Option 2 Option 3 ``` ### No Checkmark Applying the `noCheckmark` attribute will prevent the checkmark icon from being shown on the selected option. The left padding to reserve space for the checkmark will not be shown.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ``` ### 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 Headline Label bottom-end bib with 20px offset and noFlip Stops Price Duration Departure Arrival Prefer Alaska Bib Headline Label bottom-end bib with 20px offset and flip Stops Price Duration Departure Arrival Prefer Alaska Bib Headline Label right bib with 20px offset and noFlip Stops Price Duration Departure Arrival Prefer Alaska Bib Headline Label bottom-start bib with 20px offset, noFlip and shift Stops Price Duration Departure Arrival Prefer Alaska
See code ```html
Bib Headline Label bottom-end bib with 20px offset and noFlip Stops Price Duration Departure Arrival Prefer Alaska Bib Headline Label bottom-end bib with 20px offset and flip Stops Price Duration Departure Arrival Prefer Alaska Bib Headline Label right bib with 20px offset and noFlip Stops Price Duration Departure Arrival Prefer Alaska Bib Headline Label bottom-start bib with 20px offset, noFlip and shift Stops Price Duration Departure Arrival Prefer Alaska
``` ### Placeholder Use the `placeholder` attribute to inject a custom placeholder option with the select element.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ``` ### Required When present, the `required` attribute specifies that a select field must be filled out before submitting the form. When the validity check fails the validityState, equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ``` ### Value Use the `value` property to define a preset value on the `auro-select` element. The `value` of `auro-select` must match the `value` defined of a single `auro-menuoption`. Upon initially rendering the component, if the `value` does not match an `auro-menuoption`, the `value` of `auro-select` will be set to `undefined`. To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.
Set Value to Valid Option Set Value to Invalid Option

Bib Headline Name Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Set Value to Valid Option Set Value to Invalid Option

Bib Headline Name Stops Price Duration Departure Arrival Prefer Alaska ``` ```js export function valueExample() { const valueExample = document.querySelector('#valueExample'); document.querySelector('#validValueExampleBtn').addEventListener('click', () => { valueExample.value = '["arrival", "prefer alaska"]'; }); document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => { valueExample.value = '["flight course"]'; }); } ``` ## Method Examples ### Reset State Use the `reset()` method to reset the ``'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
Reset

Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Reset

Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ``` ```js export function resetStateExample() { const elem = document.querySelector('#resetStateExample'); document.querySelector('#resetStateBtn').addEventListener('click', () => { elem.reset(); }); } ``` ### Update Active Option Use the `updateActiveOption(index)` method to programmatically set the active option in the menu.
Close Popup Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Close Popup Bib Headline Select Example Stops Price Duration Departure Arrival Prefer Alaska ``` ```js export function updateActiveOptionExample() { const select = document.getElementById('updateActiveOptionExample'); const dropdown = select.dropdown; dropdown.addEventListener('auroDropdown-toggled', () => { if (dropdown.isPopoverVisible) { select.updateActiveOption(2); // Set the active option to the third item (index 2) } }); } ``` ## Slot Examples ### Custom Value Display The `auro-select` supports the new formkit feature set enabling customized content displayed when a value is selected. e.g. You may have a menu option that reads "SeaTac International Airport". However, when that option is selected, you would like the value displayed in the auro-select to just be the airport code "SEA". The custom display value content is inserted using `slot="displayValue"` on each menu option. The `auro-select` component does not style or restrict the slotted content. It is the responsibility of the implementor to insure the content fits within the auro-select container and is styled appropriately. The following example demonstrates menu options with an icon and text. When selected, the auro-select renders an icon with no text.
Select Example Flights Cars Hotels Packages Cruises
See code ```html Select Example Flights Cars Hotels Packages Cruises ``` ### Help Text Use the `helpText` slot to provide additional information back to your user about their selection option(s).
Bib Headline Label Custom help text message. Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Custom help text message. Stops Price Duration Departure Arrival Prefer Alaska ``` ### Label Use the `label` slot to give your users contextual information about their selection options. This `label` content is also helpful for assistive devices.
Bib Headline Please select a preference Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Please select a preference Stops Price Duration Departure Arrival Prefer Alaska ``` ### Optional Label The `` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
Bib Headline Please select a preference - optional Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Please select a preference - optional Stops Price Duration Departure Arrival Prefer Alaska ``` ## CSS Shadow Part Examples ### Custom Bib Height This example shows how to set a custom height for the bib from ``. Custom height dimensions are set by using the `dropdownSize` CSS Part and then applying a `max-height` rule and value.
Bib Headline Label 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 Bib Headline Label 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... ``` ## Common Usage Patterns & Functional Examples ### Icons in Options Displays an `` element with `` elements in each option.
Bib Headline Label Air Covid Test Health Mask Spray Bottle
See code ```html Bib Headline Label Air Covid Test Health Mask Spray Bottle ``` ### Nested Submenus This example shows nesting `` elements to create submenus.
Bib Headline Label Stops Price Duration
Apples Oranges Pears Grapes Kiwi
Person Woman Man Camera TV
Departure Arrival
Cars Trucks Boats Planes Motorcycles
See code ```html Bib Headline Label Stops Price Duration
Apples Oranges Pears Grapes Kiwi
Person Woman Man Camera TV
Departure Arrival
Cars Trucks Boats Planes Motorcycles ``` ### Extract value The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska Get current value
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska Get current value ``` ```js export function valueExtractionExample() { const valueExtractionExample = document.querySelector('#valueExtraction'); const valueExtractionBtn = document.querySelector('#valueExtractionBtn'); valueExtractionBtn.addEventListener('click', () => { console.warn('Value selected:', valueExtractionExample.value); console.warn('Option selected:', valueExtractionExample.optionSelected); alert(`Value selected: ${valueExtractionExample.value}`); }) } ``` ### Custom Validity with Error State This example programmatically adds the `error` state when a user selects an option that is greater than `2`.
Bib Headline Label 1 2 3 4 5 6
See code ```html Bib Headline Label 1 2 3 4 5 6 ``` ```js export function customErrorValidityExample(elem) { const customErrorValidityExample = document.querySelector('#primaryError'); customErrorValidityExample.addEventListener('auroSelect-valueSet', () => { if (+customErrorValidityExample.value > 2) { customErrorValidityExample.setAttribute('error', 'Quantity Exceeded'); } else if (customErrorValidityExample.hasAttribute('error')) { customErrorValidityExample.removeAttribute('error'); } }) }; ``` ### Select in Dialog The component can be in a dialog.
Select in Dialog Select in Dialog
Bib Headline Name Stops Price Duration Departure Arrival Prefer Alaska
See code ```html
Select in Dialog Select in Dialog
Bib Headline Name Stops Price Duration Departure Arrival Prefer Alaska
``` ```js export function inDialogExample() { document.querySelector("#select-dialog-opener").addEventListener("click", () => { const dialog = document.querySelector("#select-dialog"); dialog.open = true; }); }; ``` ### Watch for Value Changes The following example listens for the `auroMenu-selectedOption` event. Once triggered, element.value or element.optionSelected may be queried for the new value or complete option object.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ``` ```js export function valueAlertExample() { const select = document.querySelector('#valueAlert'); const menu = document.querySelector('#valueAlertMenu'); menu.addEventListener('auroMenu-selectedOption', () => { console.warn('Select value changed to:', select.value); console.warn('Select optionSelected changed to:', select.optionSelected); }); } ``` ## Restyle Component with CSS Variables The component may be restyled by changing the values of the following token(s). ```scss @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; :host(:not([ondark])), :host(:not([appearance='inverse'])) { --ds-auro-select-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold}); --ds-auro-select-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default}); --ds-auro-select-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted}); --ds-auro-select-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default}); --ds-auro-select-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default}); --ds-auro-select-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error}); --ds-auro-select-outline-color: transparent; } :host([ondark]), :host([appearance='inverse']) { --ds-auro-select-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse}); --ds-auro-select-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse}); --ds-auro-select-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted}); --ds-auro-select-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse}); --ds-auro-select-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse}); --ds-auro-select-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse}); --ds-auro-select-outline-color: transparent; } ```