Password Input

Password field with show/hide toggle and an optional strength meter.

Import

import { PasswordInput } from '@marbleui/ui'

Props

<PasswordInput>

Prop	Type	Default
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
placeholder	`string`	`—`
showStrength	`boolean`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (120).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Group · React Aria Input · React Aria TextField. Follow the primitive's docs for the full keyboard map.

Usage notes

Password field with a show/hide toggle and an optional strength meter. For other text use TextField.

<PasswordInput
  label="New password"
  showStrength
  description="Use 12+ characters with a mix of letters, numbers and symbols."
/>

Built on React Aria TextField: value + onChange, defaultValue, isRequired, validate. type is managed internally.
showStrength uses the exported passwordScore, a rough length and variety heuristic. Swap in a real estimator (such as zxcvbn) for policy checks.
The input has autoComplete="current-password" hard-coded, which is wrong for a new-password or confirm field. Check this before using it on sign-up forms.
The toggle button is labelled “Show password” or “Hide password”.

Example source · show

import { PasswordInput } from './password-input'

export const styles = {
  Default: () => <PasswordInput className="w-72" label="Password" placeholder="Enter your password" />,
  Strength: () => (
    <PasswordInput className="w-72" label="New password" showStrength defaultValue="hunter2" description="Use 12+ characters with a mix of letters, numbers and symbols." />
  ),
  Filled: () => <PasswordInput className="w-72" variant="filled" label="API secret" defaultValue="sk_live_51Hx" />,
}

Source: packages/ui/src/password-input/password-input.tsx

Catalog

Category: inputs
Priority: Core
Primitive: composed
React Aria: TextField
Base UI: Input