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 >
Properties Property Attribute Type Default Description clearable— booleanfalsedisabled— booleanfalseerrorMessageerror-messagestring''helperTexthelper-textstring''inputId— —`nana-combobox-${Math.random().toString(36).slice(2, 7)}`invalid— booleanfalselabel— string''name— string''open— booleanfalseplaceholder— string''readonly— booleanfalserequired— booleanfalsesize— ComboboxSize'md'value— string''Selected option value (the form value)
Events Event Description nana-inputFired while typing (`detail.value` — the query text) nana-changeFired when an option is selected (`detail.value`) nana-clearFired when the field is cleared nana-focusFired on focus nana-blurFired on blur
Slots Slot Description (default)`nana-option` children prefixLeading icon inside the field
CSS parts Part Description ::part(wrapper)The bordered field container ::part(input)The native `<input>` element ::part(panel)The floating listbox panel
CSS custom properties Property Description --nana-combobox-max-heightPanel max height before scrolling
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.
