shadcn.io is not affiliated with official shadcn/ui
Input examples · Validation
Real-time Validation Input for React
A password field with a checklist of rules that tick off as you type.
A checklist is friendlier than an error after the fact. This example lists four password rules under the field, at least 8 characters, a number, an uppercase letter and a special character, and each one turns green with a check as soon as the password meets it. Use it on sign-up and password-change forms.
Preview
Installation
FAQ
How are the rules checked?
Each rule is a test function in a static list at the top of the file: a length check and three regular expressions. On every render, each rule is tested against the password in state.
How does a rule change when it's met?
Its row switches from text-muted-foreground with an XIcon to text-success with a CircleCheckIcon. The color and the icon change together, so it doesn't rely on color alone.
Where does the password live?
In state, written on every keystroke, so the checklist updates as people type.
How is the checklist marked up?
As a list, one item per rule, so screen readers announce how many rules there are. The icons have aria-hidden.
Related
- Multiple Validation Messages InputAn invalid password field listing every
- Error State InputAn invalid email field with an error
- Success State InputA username field in a success state, with
- Password with Toggle InputA password field with a button that shows
- Input with LabelA text input with a label above it
- Simple Text Input FormA form with one username text input that