shadcn.io is not affiliated with official shadcn/ui
Input examples · Validation
Error State Input for React
An invalid email field with an error message under it.
An error should say what's wrong, right where it happened. This example marks the field invalid, which turns the input's border and ring destructive, and shows Please enter a valid email address under it in FieldError, next to a CircleAlertIcon. Use it to show validation errors after submit or on blur.
Preview
Installation
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.
Related
- Success State InputA username field in a success state, with
- Warning State InputA password field in a warning state, with
- Multiple Validation Messages InputAn invalid password field listing every
- Real-time Validation InputA password field with a checklist of
- Email InputAn email field with a mail icon inside it
- Simple Text Input FormA form with one username text input that