shadcn.io is not affiliated with official shadcn/ui
Multi Select Skills Form Block for React
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 Base 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.
Related
- Pro
A combobox of 24 regions that narrows as you type, marks the letters that match, counts the matches and spells out the chosen region, with its facts in a side cell.
- Pro
Grouped Person Select Form
SelectsA select of nine people grouped by team, each with initials, name and duty, beside a week strip that shows that person's hours and marks a week that would pass 40 hours.
- Pro
Task Status Select Form
SelectsA required select of five task statuses, each with a glyph and a word, that moves a drawn task row to the status you choose once Move task is pressed.
- Pro
Tag Input Form
Text fieldsA tags field that cleans every tag it takes (trimmed, lower case, no repeats), splits a pasted list and shows what was pasted next to what was added.
- Pro
Live Count Property Search Contact
Finance and propertyA rental search whose match count falls as you narrow it: bedrooms, a rent range, must-haves and neighbourhood chips, three example homes beside it, then a form that checks itself and confirms in place.
- Pro
Ship-To Country Select Form
SelectsA combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.