Password Requirement

Component for displaying live password validation feedback based on defined requirements, optionally with strength progress bars.

Usage

Basic usage example to quickly see how the PasswordRequirement works.

Minimum 10 characters and maximum 100 characters
Minimum one lowercase character
Minimum one uppercase character
Minimum one number
At least one special character, e.g, !@#?

"use client";
import { Input } from "@/ui/input";
import { Stack } from "@/ui/stack";
import { PasswordRequirement, PasswordRequirementProvider } from "@/ui/password-requirement";

export function PasswordRequirementDemo() {
  return (
    <PasswordRequirementProvider>
      <Stack>
        <Input.Password />
        <PasswordRequirement />
      </Stack>
    </PasswordRequirementProvider>
  );
}

Properties

Interactive configurator to explore customization options for the PasswordRequirement component.

Password requirements:Make sure the following requirements are met:

Minimum 10 characters and maximum 100 characters
Minimum one lowercase character
Minimum one uppercase character
Minimum one number
At least one special character, e.g, !@#?

With progress bars

Managing State with Provider

When using the PasswordRequirementProvider to automatically manage value and onChange state, you must use the <Input.Password /> component.

export function PasswordRequirementDemo() {
  return (
    <PasswordRequirementProvider>
      <Stack>
        <Input.Password />
        <PasswordRequirement />
      </Stack>
    </PasswordRequirementProvider>
  );
}

Controlling State Manually

You can also manually control the input's value and pass it to the provider via value and onValueChange props.

export function PasswordRequirementDemo() {
  const [value, setValue] = React.useState<string>("");
  return (
    <PasswordRequirementProvider value={value} onValueChange={setValue}>
      <input value={value} onChange={e => setValue(e.currentTarget.value)} />
      <PasswordRequirement />
    </PasswordRequirementProvider>
  );
}

API References

Styles API

The classNames and styles props allow you to customize the appearance of the component parts.

type Selector = "root" | "item" | "icon" | "label" | "progressRoot" | "progressIndicator";

Styles API	Type	Default	Annotation
classNames`?`	`Partial<Record<Selector, string>>`	`undefined`	---
styles`?`	`Partial<Record<Selector, CSSProperties>>`	`undefined`	---

Props API

Props API	Type	Default	Annotation
value`?`	`string`	`undefined`	---
withProgressBars`?`	`boolean`	`undefined`	---
requirements`?`	`Requirements[]`	`undefined`	---
strength`?`	`{ min?: number; max?: number }`	`undefined`	---

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

password-requirement.tsx