Sextant
Searchable select. Type to filter a long list, pick with the keyboard or the mouse, with matches highlighted.
- Component
- Searchable select
- Pattern
- APG Combobox
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Sextant · React + TailwindFull width
| Keys | What happens |
|---|---|
| Down arrow | Open the list. Opened already: move to the next option. |
| Up arrow | Move to the previous option, or open the list at the last one. |
| Alt + Down arrow | Open the list without moving to an option. |
| Enter | Choose the highlighted option. |
| Escape | Close the list. Closed already: clear the field. |
| Tab | Close the list and move on. The field keeps what you typed. |
| Any character | Filter the list, with matching text highlighted, and announce how many results are left. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/searchable-select.json"Run it in your project root. It writes components/searchable-select.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).