Skip to content

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

Free

Error State Input for React

An Email field set to invalid-email, with an error border and the message Please enter a valid email address always showing.

Email is filled with invalid-email. The border is in the error color, and under the field an alert icon sits beside the words Please enter a valid email address. That message is always showing.

Show a message like this after submit, or on blur, once the value is wrong. A banner for the whole form is an Alert. In React, Base UI does not write the error text.

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" invalid>
  <FieldLabel htmlFor="error-email">Email</FieldLabel>
  <Input
    className="bg-background"
    defaultValue="invalid-email"
    id="error-email"
    placeholder="you@example.com"
    type="email"
  />
  <FieldError className="flex items-center gap-2">
    <CircleAlertIcon aria-hidden="true" className="size-4 shrink-0" />
    Please enter a valid email address
  </FieldError>
</Field>

FAQ

How is the field marked invalid?

invalid on Field. It sets aria-invalid on the input, which the input's styles turn into a destructive border and ring, and screen readers announce the field as invalid.

How is the message shown?

In FieldError after the input, in destructive text with a CircleAlertIcon at size-4. The icon has aria-hidden, since the text says it all.

When does the error show?

In this example, always: the field is marked invalid with invalid-email as its default value. In a form, set invalid from your validation, after submit or when the field loses focus, and render the message only then.

Is the error announced?

FieldError is a live region, so screen readers announce the message when it appears.

How do I use it with a form library?

Set invalid on Field from the library's field state and put its message in FieldError. The input and the message then follow your validation.

How is Email tied to the field?

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

API Reference

Field

Sets invalid and htmlFor="error-email". The rest is on the Field page.

Input

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

All 24 input examples