shadcn.io is an independent project built on shadcn/ui
Password shows pass and the border is in the error color. Under it, a fixed list of three messages, each with an alert icon: too short, no number, and no special character.
Use it after a check that failed more than one rule, so people see every problem at once. A single banner is a weaker Alert. In React, Base UI does not test this password.
Installation
Anatomy
Usage
<Field className="w-full max-w-sm" invalid>
<FieldLabel htmlFor="multiple-password">Password</FieldLabel>
<Input
className="bg-background"
defaultValue="pass"
id="multiple-password"
placeholder="Enter password"
type="password"
/>
<FieldError className="flex flex-col gap-1">
{messages.map((message) => (
<span className="flex items-center gap-2" key={message}>
<CircleAlertIcon aria-hidden="true" className="size-4 shrink-0" />
{message}
</span>
))}
</FieldError>
</Field>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.
API Reference
Field
Sets invalid and htmlFor="multiple-password". The rest is on the Field page.
Input
Sets defaultValue="pass", id="multiple-password", placeholder="Enter password" and type="password". The rest is on the Input page.
