Dropdown

A trigger that reveals a panel of options — single or multi-select, optionally searchable and grouped. Flips above the trigger when it would overflow.

Examples

United States Canada Mexico React Vue Svelte United StatesUnited KingdomCanadaGermanyFranceJapan
dropdown.html
html
1 <nana-dropdown label="Country" searchable>
2 <nana-option value="us">United States</nana-option>
3 <nana-option value="ca">Canada</nana-option>
4 </nana-dropdown>

Grouped

Engineering Ada Lovelace Alan Turing Design Paula Scher

Import

main.ts
ts
1 import "@nana-tec/ui-components/dropdown";

Props

AttributeTypeDefault
openbooleanfalse
selectsingle | multiplesingle
searchablebooleanfalse
disabledbooleanfalse
labelstringSelect
valuestring (comma-sep for multi)""

Fires nana-change with the selected value (string) or values (string[]).