# 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. ## 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) ## Example(s) ### Basic
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Layouts #### Emphasized Use `layout="emphasized"` to apply the emphasized style to the combobox. This layout is designed for use on light backgrounds.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar
Apples
Fruit
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar
Apples
Fruit
 ``` #### Snowflake Use `layout="snowflake"`, with `shape="snowflake"` and `appearance="inverse"` to apply the snowflake style to the combobox. This layout is designed for use on dark backgrounds.
Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar
See code ```html Close combobox Clear All Bib Header Name Apples Oranges Peaches Grapes Cherries No matching option Help text - Lorem ipsum solar lorem ipsum solar ```