Skip to content

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

Free

Real-time Validation Input for React

A Create Password field with four rules under it that switch from an X to a green check as the password meets them.

Create Password starts empty. Under it, four rules each show an X: 8 characters, a number, an uppercase letter, and a special character. A met rule turns green and gains a check.

Use it while people create a password, so submit is not the first time they see a rule. If you only list failures, put those on the Field. In React, Base UI does not know these 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

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<li
  className={cn(
    "flex items-center gap-2 text-sm",
    valid ? "text-success" : "text-muted-foreground"
  )}
  key={rule.text}
>
  {valid ? (
    <CircleCheckIcon aria-hidden="true" className="size-4" />
  ) : (
    <XIcon aria-hidden="true" className="size-4" />
  )}
  {rule.text}
</li>

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.

How do I change the rules?

Edit the list: each entry has a text and a test that takes the password and returns true when the rule is met. Keep the same rules on the server.

How is Create Password tied to the field?

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

All 24 input examples