@magic-spells/select-dropdown

Dropdowns done
right

A fully accessible custom select component with keyboard navigation, ARIA support, and CSS-variable theming. No Shadow DOM — style it directly.

Install npm i @magic-spells/select-dropdown
Size (gzip) ~3.5 KB

Markup

Drop-in HTML structure with zero configuration.

<select-dropdown> <select-trigger> <span class="select-label-text">Pick one</span> </select-trigger> <input type="hidden" name="field" /> <select-panel> <select-label>Group</select-label> <select-option value="a">Option A</select-option> <select-option value="b" selected>Option B</select-option> <select-divider></select-divider> <select-option value="c">Option C</select-option> </select-panel> </select-dropdown>

Simple Select

A straightforward dropdown with a preselected value. Click or use keyboard to navigate options.

Cherry Apple Banana Cherry Durian Elderberry
Selected: Cherry

Grouped Options

Organize options with <select-label> headings and <select-divider> separators. Non-option elements are skipped during keyboard navigation.

Select a snack Fruit Apple Banana Mango Strawberry Nuts Almond Cashew Pistachio Walnut
Selected: None

CSS Variable Theming

Every color is driven by custom properties. Override them on a wrapper class to create distinct themes with no JavaScript.

Select a color Amber Crimson Jade Iris Slate
Selected: None

Form Integration

A hidden <input> inside the component syncs with the selected value, so it works natively with any <form>.

Select an animal Dog Cat Bird Fish Rabbit
Result: Not submitted yet

Large Dataset

A long scrollable list with grouped regions. Type-ahead search jumps to matching options.

Select a time zone Americas Eastern Time (New York) Central Time (Chicago) Mountain Time (Denver) Pacific Time (Los Angeles) Alaska (Anchorage) Hawaii (Honolulu) Toronto Mexico City Sao Paulo Europe London Paris Berlin Amsterdam Rome Stockholm Istanbul Moscow Asia & Pacific Dubai Kolkata Singapore Shanghai Tokyo Seoul Sydney Auckland
Selected: None

Every Country

195 countries in alphabetical order. Try the multi-character typeahead — type uni quickly to jump to "United Kingdom", or bra for "Brazil". Repeating the same letter (e.g. s s) cycles through all S countries.

Select a country Afghanistan Albania Algeria Andorra Angola Antigua and Barbuda Argentina Armenia Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bhutan Bolivia Bosnia and Herzegovina Botswana Brazil Brunei Bulgaria Burkina Faso Burundi Cabo Verde Cambodia Cameroon Canada Central African Republic Chad Chile China Colombia Comoros Congo (DR) Congo (Republic) Costa Rica Cote d'Ivoire Croatia Cuba Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Eswatini Ethiopia Fiji Finland France Gabon Gambia Georgia Germany Ghana Greece Grenada Guatemala Guinea Guinea-Bissau Guyana Haiti Honduras Hungary Iceland India Indonesia Iran Iraq Ireland Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Kosovo Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Mauritania Mauritius Mexico Micronesia Moldova Monaco Mongolia Montenegro Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands New Zealand Nicaragua Niger Nigeria North Korea North Macedonia Norway Oman Pakistan Palau Palestine Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Qatar Romania Russia Rwanda Saint Kitts and Nevis Saint Lucia Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Korea South Sudan Spain Sri Lanka Sudan Suriname Sweden Switzerland Syria Taiwan Tajikistan Tanzania Thailand Timor-Leste Togo Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States Uruguay Uzbekistan Vanuatu Vatican City Venezuela Vietnam Yemen Zambia Zimbabwe
Selected: None

Keyboard Navigation

Full WAI-ARIA compliant keyboard support. Every interaction that works with a mouse also works with a keyboard.

Tab Focus trigger
Enter Show / select
Space Show / select
Esc Hide panel
↓ Next option
↑ Previous option
Home First option
End Last option
A-Z Type-ahead search
Navigate me Citrus Orange Lemon Grapefruit Berries Blueberry Raspberry Blackberry Tropical Pineapple Papaya Passionfruit
Selected: None