Password inputforms
Password field with a show/hide toggle using aria-pressed, a Caps Lock warning and an optional live rules checklist.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/password-input의존 아이템input-grouplocalestyle
Default
password-input-demo.tsx
"use client";
import * as React from "react";import { PasswordInput, type PasswordRule } from "@/components/ui/password-input";
const rules: PasswordRule[] = [ { id: "length", label: "At least 8 characters", test: (v) => v.length >= 8 }, { id: "digit", label: "Contains a number", test: (v) => /\d/.test(v) }, { id: "case", label: "Upper and lower case", test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v) },];
export default function PasswordInputDemo() { const [value, setValue] = React.useState(""); return ( <div className="w-80"> <PasswordInput aria-label="New password" autoComplete="new-password" value={value} onValueChange={setValue} rules={rules} /> </div> );}