Custom Dropdowns

Searchable Multi-Select Dropdown

A multi-select with inline search. Type to filter options, with beginning-of-word matches prioritized.

Try typing 'c' to see C, C++, C#, Clojure, etc. grouped at the top. Type 'java' to see Java and JavaScript. Press Backspace with empty search to remove the last chip.

Searchable Multi-Select with Freetext

Same as above, but allows adding custom tags that aren't in the predefined list.

Select from common tags or type a custom tag and press Enter to add it. Try typing 'urgent' or 'priority-high' and pressing Enter.

Ordered Multi-Select Dropdown

A simpler dropdown that allows selecting multiple items. Selected items appear as chips below the dropdown.

Click the dropdown to select additional fruits. Click the × on a chip to remove it.

Ordered Multi-Select with Filter Chip

Same as above, plus a nonselectable filter chip (not in the dropdown) that owns its own URL parameter. Removing it clears only that query param; sort chips still use the container param.

Open devtools and watch the URL: the demo chip uses ?story_demo_filter=demo-owner. Sort chips use ?story_fruits_sort=… (separate from the first demo's ?fruits=…).

How It Works

Searchable Multi-Select

• Click or focus the input area to open the dropdown
• Type to filter options - beginning matches appear first
• Click an option or press Enter to select the first match
• Selected items appear as removable chips inline with the search
• Press Backspace with empty search to remove the last chip
• Press Escape or click outside to close the dropdown
• With freetext enabled, type any value and press Enter to add it as a custom chip

Ordered Multi-Select

• Click the dropdown trigger to open the menu
• Click an option to toggle its selection
• Selected items appear as removable chips
• The selection order is preserved
• Selections can be persisted to URL parameters