Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Text

Email with Domain Input Group for React

A username input with a fixed @vercel.com domain at its end.

Framework
UI library

For sign-ups limited to one domain: people type the part before the @, and @vercel.com is shown after it as InputGroupText. Combine the two when you submit.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the domain sit after the input?

An InputGroupAddon with align="inline-end", written after the input.

Is the domain part of the value?

No, the input holds only the username. Append @vercel.com when you submit or validate.

Why type=text and not type=email?

The field holds only the part before the @, which isn't a full address.

How is the field labeled?

aria-label="Email username". Add the domain to the label or a description if people should hear it.

Does clicking the domain focus the input?

A click on the addon's empty space focuses the input, because the addon looks for the group's input. Clicks on a button inside the addon stay on that button.

What if the domain is long?

The text takes its natural width and the input shrinks; keep the group wide enough for a name to fit.

All 39 input group examples