shadcn.io is not affiliated with official shadcn/ui
Industry Picker Onboarding Block for Svelte
A multi combobox with chips over eighteen industries that holds three, says the limit in words and refuses a fourth instead of switching anything off, with an Add row for a name that is not on the list.
Installation
Overview
Let people tell you their field in their own words, with this industry picker for Svelte with Ark UI. It is a step of Fieldhurst, a market-research platform, as a whole screen: the page's rails and one band, a step header (“Step 3 of 7” and a hairline), and a framed panel with a single field: a Combobox with chips over eighteen industries. Type to filter the list, press an industry to add it as a chip, press a chip's X (or Backspace in an empty field) to take it off, and type a name that is not on the list to get an Add row for it. Up to three can be picked, said in words under the field. At three the list says so and a fourth is refused in words, never quietly disabled, and the field keeps its height whatever is picked. One sentence says which reports Fieldhurst builds first, and every change rewrites it. Continue is the one Shine Button; without a pick it says so and puts focus in the field. Nothing is saved.
FAQ
How is the limit of three enforced?
In one pure function, changeOf, which every pick, removal and Add goes through: it works out the new picks and, when there would be a fourth, returns the old picks with the line “You can pick three. Remove one to add another.” Nothing is disabled: the rows stay pressable, the refusal shows in a reserved line under the field and the open list carries a note while three are picked. Change LIMIT and WORDS to use another limit.
How does a name that is not on the list get added?
When what you typed matches no industry exactly, the list ends with an “Add” row for it, using your words with a capital first letter. Picking it adds the name as a chip and as a row in the list from then on; a name that matches an industry apart from case or accents picks that industry instead. Added names are kept in the block's state only.
Is the combobox the same on every library?
The block gives each library what it needs and keeps the rest identical: the chips are the block's own, so every library removes one the same way, and the list is filtered by the block, not by the library. The combobox is the Ark one, given a collection of the matching rows.
What happens if I press Continue with nothing picked?
Continue stays in the tab order and looks quiet until one industry is picked; pressing it says “Pick an industry to continue.” in the reserved line and puts focus in the field.
What stays local in the demo, and how do I wire it?
Everything: Continue says the industries were saved in this demo and nothing leaves the page. In your app send the picks to your server where submit says so; send added names as free text for review rather than creating categories from them. Skip for now says it was skipped and keeps the chips.