Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input examples · Validation

Multiple Validation Messages Input for React

An invalid password field listing every rule it breaks.

Framework
UI library

When a value breaks several rules, list them all at once instead of one per attempt. This example marks the password field invalid and shows three messages in FieldError, each with a CircleAlertIcon: too short, no number, no special character. Use it for passwords, usernames and other fields with several rules.

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 are the messages listed?

One FieldError holds the messages, stacked with flex-col gap-1. Each is a row with a CircleAlertIcon and its text, rendered from a static list of strings.

How is the field marked invalid?

invalid on Field, which sets aria-invalid on the input and gives it a destructive border and ring.

Are the rules checked as I type?

No. The value pass and the messages are fixed, to show the invalid state. Compute the list from the value to make it live, as the Real-time Validation example does.

Are the icons read out?

No. Each CircleAlertIcon has aria-hidden; the text carries the message.

Should I show all rules up front instead?

For passwords, a checklist that ticks off as people type, like the Real-time Validation example, is friendlier than errors after the fact. Use a list of errors when the value comes from elsewhere or is checked on submit.

How is Password tied to the field?

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

All 24 input examples