Trawl
Multi-select. Pick several from a long list, with each choice removable and every change announced.
- Component
- Multi-select
- Pattern
- APG Combobox, multi-select
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Trawl · React + TailwindFull width
| Keys | What happens |
|---|---|
| ↓ ↑ | Open the list and move through the options. The caret stays in the box. |
| Enter | Add or remove the highlighted option. |
| Backspace | With an empty box, take the last choice off. |
| Esc | Close the list and leave the choices alone. |
| Tab | Leave the field. The chosen ones are buttons you can reach too. |
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/multi-select.json"Run it in your project root. It writes components/multi-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).