<!--
The README.md file is a compiled document. No edits should be made directly to this file.

README.md is created by running `npm run build:docs`.

This file is generated based on a template fetched from
`../../docs/templates/componentReadmeTemplate.md`
and copied to `./componentDocs/README.md` each time the docs are compiled.

The following sections are editable by making changes to the following files:

| SECTION                | DESCRIPTION                                       | FILE LOCATION                              |
|------------------------|---------------------------------------------------|--------------------------------------------|
| Description            | Description of the component                      | `./docs/partials/description.md`           |
| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`              |
| Getting Started        | Getting started link for this component           | `./docs/partials/readmeGettingStarted.md`  |
-->

# Select

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
<!-- The below content is automatically added from ./docs/partials/description.md -->
<p>The component is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom elements</auro-hyperlink> that consists of a pre-defined trigger element, <code>&lt;auro-menu&gt;</code> for the panel content. The <code>&lt;auro-select&gt;</code> element presents a menu of options. The options within the menu are represented by <code>&lt;auro-menu&gt;</code> and <code>&lt;auro-menuoption&gt;</code> elements. You can pre-select options for the user with the `selected` attribute as part of the <code>&lt;auro-menuoption&gt;</code> API.</p>
<p>The component is used to create a drop-down list for user input within a form. It acts as a container for options.</p>
<p>Key features:</p>
<ul>
<li>Preset values</li>
<li>Mark as required when in a form</li>
<li>Disable individual options or the entire component</li>
<li>Enable multi-select</li>
<li>Separate options into groups with dividers</li>
<li>Group options into nested levels</li>
<li>Autocomplete</li>
</ul>
<!-- AURO-GENERATED-CONTENT:END -->

## Select Use Cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
See description.
<!-- AURO-GENERATED-CONTENT:END -->

## Getting Started

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeGettingStarted.md) -->
<!-- The below content is automatically added from ./docs/partials/readmeGettingStarted.md -->
For Getting Started instructions, visit the [auro-select Getting Started page](https://auro.alaskaair.com/components/auro/select/getting-started).
<!-- AURO-GENERATED-CONTENT:END -->
