# 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. ## Select Use Cases See description. ## Getting Started #### NPM Installation ```shell $ npm i @aurodesignsystem/auro-formkit ``` ### TypeScript Module Resolution When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`: ```json { "compilerOptions": { "moduleResolution": "bundler" } } ``` This configuration enables proper module resolution for the component's TypeScript files. ## Install from CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Formkit Development ### Filtering Running the `dev` command will open a `localhost` development server for all components in the monorepo at once. To only develop a single component, use the `--filter` flag: ```shell npx turbo dev --filter=@aurodesignsystem/auro-input ``` ## Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you. However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // Import the class only import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class'; // Register with a custom name if desired AuroSelect.register('custom-select'); ``` This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.
Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska
See code ```html Bib Headline Label Stops Price Duration Departure Arrival Prefer Alaska ```