Does the checklist tell me how secure a password is?

No. It reports only whether the configured local rules are met. It does not calculate entropy, inspect breached-password lists, or make a security-strength claim.

How is length counted?

Minimum length counts Unicode code points, so an astral character counts once rather than as two UTF-16 code units.

Does the component store or send the password?

No. It keeps uncontrolled input state locally or emits the value through onValueChange; it does not persist or transmit it.

Password Criteria

A native password input with live Unicode-defined criteria feedback and no strength score.

New account password

At least 12 characters: Not met
A lowercase letter: Not met
An uppercase letter: Not met
A number: Not met

Customise

Minimum characters12

Require lowercase

Require uppercase

Require number

Require symbol

Code

<InputPasswordCriteria label="New account password" autoComplete="new-password" />

Input Password Criteria helps a person entering a new password understand which composition requirements are currently met. The checklist responds to the native password field while preserving its form behavior and keyboard editing.

The component reports only explicit rules such as code-point length, Unicode letter case, decimal digits, and optional punctuation or symbols. It does not estimate password strength, check breaches, store values, or replace server-side policy validation.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-password-criteria

Usage

import { InputPasswordCriteria } from "@/components/input-password-criteria";

<InputPasswordCriteria
  label="Create a password"
  name="password"
  autoComplete="new-password"
  minLength={14}
  requireSymbol
/>

Props

Prop	Type	Default	Description
label	string	required	Visible label associated with the native password input.
value	string	undefined	Controlled password value; takes precedence over defaultValue.
defaultValue	string	empty	Initial value for uncontrolled use.
onValueChange	(value) => void	undefined	Receives the unchanged value from native user input.
minLength	number	12	Required Unicode code-point count; valid range is 1–256.
requireLowercase	boolean	true	Require at least one Unicode Ll code point.
requireUppercase	boolean	true	Require at least one Unicode Lu code point.
requireNumber	boolean	true	Require at least one Unicode Nd decimal digit.
requireSymbol	boolean	false	Require Unicode punctuation or symbol (P/S); combining marks and controls do not count.
name	string	undefined	Native form field name.
autoComplete	string	undefined	Native password autofill hint.
className	string	undefined	Additional classes merged onto the root.

Customisation

Choose a minimum length and the composition rules used by the surrounding form. The requirements appear as visible text linked to the field. They are UX feedback only; keep authoritative validation on the server and avoid treating the checklist as an entropy or safety score.

<InputPasswordCriteria
  label="New workspace password"
  minLength={16}
  requireSymbol
  autoComplete="new-password"
/>

Frequently asked questions

Does the checklist tell me how secure a password is?: No. It reports only whether the configured local rules are met. It does not calculate entropy, inspect breached-password lists, or make a security-strength claim.
How is length counted?: Minimum length counts Unicode code points, so an astral character counts once rather than as two UTF-16 code units.
Does the component store or send the password?: No. It keeps uncontrolled input state locally or emits the value through onValueChange; it does not persist or transmit it.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js account journeys with considered onboarding and form states. Browse the paid templates that pair with these free components.Explore Template Empire templates