# Select `` is a combination HTML custom element that consists of a pre-defined trigger element, `` for the panel content. The `` element presents a menu of options. The options within the menu are represented by `` and `` elements. You can pre-select options for the user with the `selected` attribute as part of the `` API. ## Use Cases See description. ## Example(s) ### Basic A baseline `` using `` and `` elements.

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

``` ### 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

```