Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input examples · Types

Email Input for React

An email field with a mail icon inside it.

Framework
UI library

An icon tells people what a field wants at a glance. This example puts a MailIcon in an InputGroupAddon beside an input with type email, so the browser checks the address and phones show the email keyboard. Use it in sign-in, sign-up, contact and newsletter forms.

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

What does type email give this field?

The browser checks that the value looks like an address when the form is submitted, and mobile keyboards show the @ key. The placeholder you@example.com shows the expected shape.

How is the icon placed inside the field?

The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds MailIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.

Is the icon read by screen readers?

No. MailIcon has aria-hidden, because the Email Address label already names the field. The icon is a visual hint only.

How is Email Address tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to email-address, the input's id.

How do I let browsers fill in the address?

Add autoComplete email to the input. Browsers and password managers then offer the saved address.

How do I show an invalid address?

Mark the field invalid and add a FieldError with the message, as the Error State example does.

All 24 input examples