# Combobox `` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search. By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox. ## Combobox Use Cases The `` element should be used in situations where users may: * Search * Airports: user looks for a specific airport by searching for the city name or airport code * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results * Filter * Options: user chooses filters for their search by using combobox * Select * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34) ## 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 { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class'; // Register with a custom name if desired AuroCombobox.register('custom-combobox'); ``` 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 Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ```