Password Input - HapplyUI

A composed password input with show/hide toggle and optional strength indicator with criteria checklist. Built on Input primitives and LevelBar.

Installation

bunx @happlyui/cli@latest add password-input

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

form-field-context
input
level-bar

Usage

import * as PasswordInput from "@/components/ui/password-input"

<PasswordInput.Root />

Examples

Default

Basic password input with show/hide toggle.

<PasswordInput.Root placeholder="Enter password" />

With Strength

Password input with strength indicator and criteria checklist.

Must contain at least;

At least 1 uppercase

At least 1 number

At least 8 characters

<PasswordInput.Root
  showStrength
  criteria={[
    { key: 'length', label: 'At least 8 characters', met: true },
    { key: 'uppercase', label: 'At least 1 uppercase', met: false },
    { key: 'number', label: 'At least 1 number', met: false },
  ]}
/>

With Form Field

Password input composed with FormField for consistent label and hint.

Password*

Minimum 8 characters.

<FormField.Root
  label="Password"
  htmlFor="password"
  required
  hint="Minimum 8 characters."
>
  <PasswordInput.Root id="password" />
</FormField.Root>

API Reference

PasswordInput.Root

The composed password input component. Forwards ref to the underlying input element.

Prop	Type	Default	Description
`size`	`'medium' \| 'small' \| 'xsmall'`	`'medium'`	Input size
`hasError`	`boolean`	`false`	Error state
`placeholder`	`string`	`'••••••••••'`	Placeholder text
`leadingIcon`	`React.ElementType`	`RiLock2Line`	Leading icon component
`showIcon`	`React.ElementType`	`RiEyeLine`	Icon shown when password is hidden
`hideIcon`	`React.ElementType`	`RiEyeOffLine`	Icon shown when password is visible
`showStrength`	`boolean`	`false`	Enable strength bar and criteria
`criteria`	`PasswordCriterion[]`	-	Strength criteria array: { key: string; label: string; met: boolean }
`criteriaLabel`	`string`	`'Must contain at least;'`	Label displayed above criteria list