shadcn.io is not affiliated with official shadcn/ui
Multi Select Skills Form Block for Radix UI
A combobox that holds up to five of eighteen skills as chips inside the field, says its limit in words and refuses a sixth, and counts the open projects the skills cover.
Installation
Overview
Choose a few skills out of many with this multi select form for React with Radix UI. A compact header sits over a hairline frame with a plus mark on each corner. A Combobox holds up to five of eighteen skills as chips inside the field: typing narrows the list, every option names its group (Frontend, Backend or Data) in a word, picking adds a chip with its remove button, and Backspace on an empty box takes the last one away. The limit is said in words and never by greying the list out: at five the line under the field says "Remove one to add another", and picking a sixth is refused with that sentence in the foot, the five staying as they were. Below, seven open projects, each needing two skills, say "Covered" or what is missing, and one figure counts how many the chosen skills cover. Clear all empties the field and Save skills is quiet until the choice changes. It's built from Combobox, Button, Shine Button and Guides, with a CSS entrance only. For skills matrices, interest pickers, tag-like fields with a cap and any form that lists a few items from many.
FAQ
How do I use my own skills, projects and limit?
Edit SKILLS (a name and a group each), PROJECTS (an id, a name and the skills it needs) and LIMIT. The options, the group word, the coverage cells and the count all come from them. A project is covered when every skill it needs is among the chosen ones; the cell names what is missing otherwise.
Why doesn't the list disable itself at the limit?
A list of greyed rows doesn't say why. Here every option stays available, the line under the field states the limit in words from the moment it is reached, and an attempt to go over it is refused out loud: the foot says "Not added. 5 is the most: remove one first." and the chips don't change. The handler that refuses is choose, and it is the same code on every base.
How does it work from the keyboard?
Typing opens the list, the arrow keys move through it, Enter picks, and Escape closes it. Backspace in the empty box removes the last chip, and each chip's own remove button is named for its skill ("Remove CSS"). The field is named by its label, "Skills". The count of chosen skills is shown but hidden from assistive technology, and the foot announces each change ("Added Animation. 5 of 5 chosen.").
How is the coverage worked out?
missingOf filters a project's needs by the chosen skills; coveredCount counts the projects with nothing missing. Both read the live choice, not the saved one, so the figure shows what saving would do. The cells keep a fixed height, so nothing moves as skills change.
What stays local, and how do I connect it for real?
Nothing is saved: Save skills says "3 skills listed in this demo. Nothing was saved." and a repeat press says there are no changes. Replace the body of submit with a call that stores the skills, and load the real projects from your API. With react-hook-form or TanStack Form the value is an array of names; enforce the limit in your schema as well as in choose.