Centered Seat-Capped Invite CTA Block for React

The plan allows ten seats and four are already taken, so the field accepts six chips in total (TOTAL_SEATS and TAKEN_SEATS at the top of the file, ready to be fed from your billing data). At that point the input becomes read-only, its placeholder reads "Seats are full" and the line under it explains the limit. Removing a chip, with its delete button or Backspace, frees a seat at once and the field takes addresses again.

An address is added only if it looks like an email (something, an at sign, a domain with a dot) and isn't on the list already, ignoring case. When one is turned down, the line under the field says why in a polite live region and the field is marked invalid until you type again. It is a format check only: a real invite flow still verifies the address on your server and refuses people who already belong to the workspace.

Yes. Pasting a comma-separated list adds every valid address up to the seat limit and ignores the rest. A comma or Enter adds the address being typed, and leaving the field adds it too.

No: the request is simulated in send. After the list passes the check, the button shows its spinner for LATENCY (0.8 seconds) and a timer swaps the form for the confirmation, and the seats it used stay taken until the page reloads. Replace the timer with a request to your invite endpoint, keep the loading state while it runs, and on success keep the rest: the confirmation that takes focus and the seat count that follows the result. If it fails, set the phase back to "idle" and put the message in note. The timer is cleared when the block unmounts, so cancel a real request there too.

The input is named "Teammate email addresses" and described by the line under it; each chip's delete button is named after its address; the arrow keys move between chips. The seat dots are decorative and the same numbers are written out ("3 of 10 seats open"). When the form is replaced, the confirmation's heading takes focus; "Invite more teammates" brings focus back to the field. The form is inert while hidden, so its fields leave the tab order.

The layout uses logical properties, so the chips, the dots and the note under the field follow the page's direction, while addresses and numbers are isolated so they keep their order. The only motion is the entrance fade and the dots' colour change, and both stop when reduced motion is requested.