Email Tokenizer

Bulk invite field that tokenizes addresses into chips and flags invalid ones with a rose tint.

lara@beste.conils@beste.coom@acmeSeparate with commas
om@acme is missing the domain ending.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form17 } from "@/components/beste/piece/form17";

<Form17
  label="Invite by email"
  emails={[
    {
      "address": "lara@beste.co",
      "valid": true
    },
    {
      "address": "nils@beste.co",
      "valid": true
    },
    {
      "address": "om@acme",
      "valid": false
    }
  ]}
  placeholder="Separate with commas"
  error="om@acme is missing the domain ending."
/>

More Form pieces

View all Form
mira@acme
Enter a valid email address, including the domain.

Error State

form2

Invalid field with a rose ring, alert icon inside the input, and a descriptive error under it.

Billing addressUsed on invoices and receipts.
221B Riverside Ave
Istanbul
34381

Fieldset Group

form9

Bordered card bundling a legend, description, and a short stack of related inputs.

Looks good, @mir
Beste Sözen
Beste Sözen@mira
Miranda Chase
Miranda Chase@miranda
Mirko Petrov
Mirko Petrov@mirko

Mention Picker

form15

Inline @-mention typed into a field, paired with an avatar-led autocomplete dropdown beneath.

Required
Oud Beste
We use this for invoices and tax documents.

Required Field

form4

Labeled input flanked by a red asterisk and a Required pill, plus an explanatory hint below.

design systemstypographymotionType and press ↵
Up to 8 tags. Use hyphens instead of spaces.

Tag Input

form14

Free-form tagger that wraps committed tokens as removable chips and shows a placeholder slot at the end.

Get early access

you@clinic.com
Notify me

No spam, just one launch note.

Email Capture Card

form34

A compact signup card with a title, an email field, an accent submit button, and a small reassurance note.