An editable text field paired with a filterable listbox. Type to filter the nana-option children, then pick a value with the keyboard or pointer. The panel flips above the field when it would overflow the viewport.
Apple
Banana
Show code Copy < nana-combobox label = "Fruit" placeholder = "Search…" style = "min-width:16rem" > < nana-option value = "apple" >Apple</ nana-option > < nana-option value = "banana" >Banana</ nana-option > </ nana-combobox >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/combobox " ;
< nana-combobox label = " Fruit " placeholder = " Search… " style = " min-width:16rem " >
< nana-option value = " apple " > Apple </ nana-option >
< nana-option value = " banana " > Banana </ nana-option >
Slot an icon into the prefix slot; clearable adds a reset button.
United States
Canada
Mexico
Show code Copy < nana-combobox label = "Search country" placeholder = "Type to filter…" clearable style = "min-width:16rem" > < nana-icon slot = "prefix" name = "search" ></ nana-icon > < nana-option value = "us" >United States</ nana-option > < nana-option value = "ca" >Canada</ nana-option > < nana-option value = "mx" >Mexico</ nana-option > </ nana-combobox >
Property Type Default Description labelstring''— valuestring''Selected option value (the form value) namestring''— placeholderstring''— size'xs' | 'sm' | 'md' | 'lg''md'— openbooleanfalse— disabledbooleanfalse— requiredbooleanfalse— readonlybooleanfalse— clearablebooleanfalse— invalidbooleanfalse— helperTextstring''— errorMessagestring''— inputId—nana-combobox-${Math.random().toString(36).slice(2, 7)}—
Event Type Description nana-inputCustomEventFired while typing (detail.value — the query text) nana-changeCustomEventFired when an option is selected (detail.value) nana-clearCustomEventFired when the field is cleared nana-focusCustomEventFired on focus nana-blurCustomEventFired on blur
Slot Description (default)nana-option childrenprefixLeading icon inside the field
Variable Default Description --nana-combobox-max-height— Panel max height before scrolling
Part Description wrapperThe bordered field container inputThe native <input> element panelThe floating listbox panel
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Combobox interactively Every state, prop, and edge case — with live controls — in Storybook.
