Bollard UI

Implementation guide

Validate a shadcn email input in React

Catch incomplete and typo-prone email addresses with a copy-paste React field that fits shadcn styling and keeps the user’s value intact.

The mistake this stops

A sign-up is lost because an address such as gmial.com is saved without a useful correction path.

Clear inline feedback before submit, with the final ownership and deliverability check still handled by your server.

Read the Email Input component docs for its live preview, API, accessibility notes, dependencies, and limitations.

Install the component

pnpm dlx shadcn@latest add https://bollard-ui.vercel.app/r/email-input.json

Use it safely

  1. Install the input and place it where you would use a normal form control.
  2. Use its correction prompt as assistance, not proof that an inbox belongs to a person.
  3. Verify the address with your normal server-side email confirmation flow.