Industry Picker Onboarding Block for React

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.

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.

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. It is the Base UI combobox with its own filtering turned off.

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.

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.

The chips wrap inside the field, which is a little taller than on a wide screen and scrolls inside itself if it ever needs more, so the page never grows. Continue pins to the foot of the screen with Skip for now beside it.