shadcn.io is not affiliated with official shadcn/ui
Team Invite Onboarding Block for Solid
An invite step with a tags field that takes a pasted list of addresses, flags what is not an email, sets one role for the batch and shows the crew with Resend and Remove.
Installation
Overview
Let a new user bring their team in with one paste, with this invite step for Solid with Ark UI. It is a step of Crewfield, a field-service scheduler, as a whole screen: the page's rails and one band across it, the step header (“Step 5 of 6” and a hairline), the heading and one framed card in two bands. The first band is a Tags Input that takes a pasted list (commas, spaces or new lines) and turns each address into a chip. An address that is not an email still becomes a chip, but it is dashed, carries a glyph and says “Not an email”, and it is not counted; the count of ready ones shows under the field. A Native Select sets the role for everyone in the batch, Member or Viewer. The second band is the crew so far: you as Owner, then each invitee with an Invited badge, Resend and Remove. Send invites reads “Send 3 invites” from the ready chips and is the one Shine Button, with a ghost Skip for now.
FAQ
How is a pasted list read?
It is cut at commas, semicolons, spaces and line breaks, each part is trimmed and lowered, empties and repeats are dropped, and at most twelve addresses are kept. Typing a comma, a semicolon or a space ends a chip too, and a chip can be edited in place to fix a typo. The check is a plain shape (something, an at sign, a host with a dot); replace EMAIL with your own rule.
What happens to an address that is not an email?
It stays in the field as a dashed chip with “Not an email”, so you can edit or remove it, and the line under the field counts it apart (“3 ready to send, 1 not an email.”). Send invites leaves it where it is and says how many were kept to fix. Pressing Send with nothing ready says so and puts focus on the field.
What do Resend and Remove do?
Only invitees have them. Resend says it was resent, in this demo, and Remove takes the person out of the crew and puts focus back on the field. The owner row has neither. An address that is already in the crew is not invited twice. The crew list is a region of fixed height that scrolls, so the card never grows as you invite.
What stays local in the demo, and how do I wire it?
Everything. Parsing and validation are real, but sending is not: Send invites moves the ready chips into the crew as Invited and says “Nothing was sent in this demo”. In your app send the invitations where submit says so, take the crew from your server, and check the addresses again there.
How does it work with the keyboard?
The arrow keys walk the chips, Backspace at the start of the field selects the last chip and a second press removes it, and Enter adds what you typed. The role select, Resend and Remove are named for their person (“Resend to sam.ibarra@team.example”), and results are spoken in one polite status.