Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Email Input for React

An Email Address field with a mail icon inside it and the placeholder you@example.com. The icon only hints at the label.

An Email Address label, a mail icon inside the field, and the placeholder you@example.com. The field is an email input.

Use it when you want the email keyboard and the browser's check on submit. Show a bad address on the Field, not with the icon alone. In React, Base UI does not invent its own email rule.

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

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="email-address">Email Address</FieldLabel>
  <InputGroup className="bg-background">
    <InputGroupInput
      id="email-address"
      placeholder="you@example.com"
      type="email"
    />
    <InputGroupAddon>
      <MailIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
</Field>

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.

API Reference

Field

Sets htmlFor="email-address". The rest is on the Field page.

Input Group

Sets id="email-address", placeholder="you@example.com" and type="email". The rest is on the Input Group page.

All 24 input examples