Password Input React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Password Input is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import PasswordInput from @/components/ui/password-input.

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

const rules = passwordRules({
  minLength: 10,
  labels: { length: (n) => "At least " + n + " characters", lower: "One lowercase letter", upper: "One uppercase letter", number: "One digit", symbol: "One symbol" },
})

export function SignUp() {
  return (
    <form className="flex flex-col gap-4">
      <PasswordInput
        name="password"
        label="Password"
        strength
        rules={rules}
        strengthLabels={["Too weak", "Weak", "Okay", "Good", "Strong"]}
        generate
        required
      />
    </form>
  )
}

Props

• labeldefault ""
  ReactNode

  The label above the box, linked with htmlFor.

• descriptiondefault ""
  ReactNode

  Helper text under the box, linked with aria-describedby. The error takes its place while it shows.

• errordefault ""
  ReactNode

  Replaces the description, slides in and marks the field invalid.

• requireddefault false
  boolean

  The red mark after the label and the native required attribute.

• disableddefault false
  boolean

  Dims the field and blocks input and the reveal toggle; the generator hides.

• invaliddefault false
  boolean

  The red ring and aria-invalid without a message, when the form shows the error elsewhere.

• readOnlydefault false
  boolean

  The password stays selectable and can still be revealed, but cannot change; the generator hides. The demo fills in a sample value.

• placeholderdefault ""
  string

  Hint text while the field is empty.

• defaultValuedefault ""
  string

  The starting password while uncontrolled; value and onValueChange control it. The meter scores this first value until the field is focused, so a password manager filling the field never makes it flash.

• showLabeldefault "Show password"
  string

  The toggle's aria-label and hover title while the password is hidden.

• hideLabeldefault "Hide password"
  string

  The toggle's aria-label and hover title while the password shows.

• capsLockLabeldefault "Caps Lock is on"
  ReactNode

  The warning under the box.

• strengthCaptiondefault "Password strength"
  string

  The caption under the meter, left of the verdict, and the prefix screen readers hear.

• generateLabeldefault "Generate a strong password"
  string

  The wand button's aria-label and hover title.

• ruleMetLabeldefault "met"
  string

  Read by screen readers after a met rule, visually hidden.

• ruleUnmetLabeldefault "not met"
  string

  Read by screen readers after a rule that is not met yet, visually hidden.

• sizedefault "md"
  "sm" | "md" | "lg"

  Height 32 / 40 / 48px like every field (md 44px on touch); the eye and wand buttons follow.

• variantdefault "soft"
  "soft" | "outline" | "underline" | "ghost"

  The field box look, shared with Input.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled with the size; full makes a pill.

• accentdefault ""
  string

  Any CSS color for the focus ring and the caret. Empty uses the ring token.

• floatingLabeldefault false
  boolean

  The label rests inside the box and floats up on focus or when filled, like Input.

• defaultVisibledefault false
  boolean

  Starts with the password shown as text. Use visible and onVisibleChange to control it.

• showToggledefault true
  boolean

  The eye button at the end of the box. It is a real button in the Tab order with aria-pressed and aria-controls; switching keeps the caret and selection.

• strengthdefault false
  boolean

  Turns the field into a sign-up field: the four-bar meter with its verdict, the rules checklist and autoComplete new-password. The verdict is announced politely 500ms after typing stops.

• showRulesdefault "focus"
  "focus" | "always" | "never"

  When strength is on: the checklist opens on focus and stays while there is text (so the button under it never moves on blur), always shows, or never shows.

• capsLockWarningdefault true
  boolean

  Reads Caps Lock from the key and pointer events while the field is focused and shows the warning (role status). Hidden on blur; phones never report it.

• generatedefault false
  boolean

  A wand button before the eye: fills a random password from crypto.getRandomValues (no 0 O l 1 I, at least one lowercase, uppercase, digit and symbol, no runs), fires onChange like typing, and reveals it until focus leaves the field.

• generateLengthdefault 16
  number

  Length of a generated password.

• maxLengthdefault 0
  number

  The native character limit, also applied to typing after a generated password. 0 means no limit.

• visible
  boolean

  Shown as text, controlled. Without onVisibleChange the toggle does nothing.

• onVisibleChange
  (visible: boolean) => void

  Fires when the toggle, the generator or the blur after a generated password changes the visibility.

• rules
  PasswordRule[]

  The checklist, { id, label, test(password) }. Defaults to passwordRules(): at least 8 characters, a lowercase letter, an uppercase letter, a number, a symbol. The rule with id length also sets the minimum for the score.

• score
  (password: string) => PasswordScore

  Replaces the scorer, e.g. with zxcvbn loaded by the app. Defaults to scorePassword (see Parts), a quick guide rather than a guarantee.

• strengthLabelsdefault "["Too weak", "Weak", "Fair", "Good", "Strong"]"
  [string, string, string, string, string]

  The verdict per score, default ["Too weak", "Weak", "Fair", "Good", "Strong"].

• onGenerate
  (password: string) => void

  Called with the generated password, e.g. to offer a copy button.

• showIcon
  ReactNode

  The toggle icon while hidden (Eye by default).

• hideIcon
  ReactNode

  The toggle icon while shown (EyeOff by default).

• generateIcon
  ReactNode

  The generator icon (WandSparkles by default).

• autoComplete
  string

  Defaults to "current-password", or "new-password" with strength or generate, so password managers save and suggest correctly. A manager's own icon may sit over the end of the box; there is room for it before the toggle.

• enterKeyHint
  "enter" | "done" | "go" | "next" | "previous" | "search" | "send"

  The label of the phone keyboard's return key: "go" for a login field, "next" with strength (a sign-up form usually continues).

• value
  string

  The password, controlled, with onValueChange. Every other Input prop works too: name, onBlur, prefix, leftIcon, fieldProps... (not clearable, loading, showCount or rightIcon: the eye and wand own the end of the box).

• onValueChange
  (value: string) => void

  Fires with the new password on every edit, including a generated one.

• onChange
  (event: ChangeEvent<HTMLInputElement>) => void

  The native change event, untouched. A generated password fires it too, like typing.

• prefix
  ReactNode

  Text or an element before the input, in the muted addon look.

• suffix
  ReactNode

  Text or an element after the input, placed before the wand and eye buttons.

• leftIcon
  ReactNode

  A leading icon such as a lock; unsized svgs follow the size (14 / 16 / 18px).

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper, e.g. labelAction: <a href="/reset">Forgot password?</a>.

• ref
  RefObject<HTMLInputElement | null> or (node) => void

  The native input.

• classNames
  Partial<Record<InputSlot | "root" | "toggle" | "generate" | "strength" | "meter" | "segment" | "strengthLabel" | "rules" | "rule" | "capsLock", string>>

  Extra classes for the inner parts: the Input keys (box, input, label...) plus the password parts.

• className
  string

  Classes for the root wrapper around the field, the warning, the meter and the checklist.

Parts

FAQ

Used in

More React input components