Password Input

PreviousNext

Secure input with reveal control, animated strength meter, configurable requirements, and validation errors.

"use client";

import { useState } from "react";

import { PasswordInput } from "@/components/matos-ui/password-input";

export function PasswordInputDemo() {
  const [password, setPassword] = useState("Matos");

  return (
    <div className="mx-auto w-full max-w-sm py-32">
      <PasswordInput
        label="Password"
        required
        value={password}
        onChange={(event) => setPassword(event.target.value)}
        placeholder="Enter a secure password"
        error={
          password.length > 0 && password.length < 8
            ? "Password is still too short."
            : undefined
        }
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/password-input.json

Usage

import { PasswordInput } from "@/components/matos-ui/password-input"

<PasswordInput
  label="Password"
  required
  error={errors.password?.message}
  {...register("password")}
/>

The reveal button supplies an accessible aria-label. Pass criteria to define custom requirements or showCriteria={false} for confirmation fields.

InputSelect