Password input

$pnpm dlx shadcn@latest add @nextui/password-input

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { useState } from "react";
4import { PasswordStrengthInput, type PasswordRule } from "@/components/nextui/password-input";
5
6const rules: PasswordRule[] = [
7  { label: "12+ characters", test: (v) => v.length >= 12 },
8  { label: "A number", test: (v) => /\d/.test(v) },
9  { label: "A symbol", test: (v) => /[^A-Za-z0-9]/.test(v) },
10];
11
12export function SignupPassword() {
13  const [password, setPassword] = useState("");
14  const [strong, setStrong] = useState(false);
15
16  return (
17    <PasswordStrengthInput
18      label="Choose a password"
19      name="password"
20      rules={rules}
21      value={password}
22      onChange={(value, score) => {
23        setPassword(value);
24        setStrong(score === rules.length);
25      }}
26    />
27  );
28}