build69
Sign inGet API key
build69  /  Components  /  Text Inputs  /  PasswordConfirmInput

PasswordConfirmInput

v1.0.6Updated 27 Aug 2026

Pairs PasswordInput with a confirm field. Forwards all PasswordInput props to the primary field; the confirm field validates equality with a red/green ring + inline match indicator.

View source← Back to catalog

Preview

Live · 7 stories
StackedOpen ↗
▸Why this is recommendedformpasswordconfirmmatch+2

PasswordConfirmInput — stacked.

Recommended for+14
  • ✓Signup forms
  • ✓Password reset flows
  • ✓Set-new-password screens
Tags+6
formpasswordconfirmmatchpairstacked
Features+4
  • Forwards every PasswordInput prop (rules, generator, meter)
  • Equality validation with red/green ring
  • Inline match / mismatch indicator under the confirm field
  • Stacked or side-by-side layouts
  • Optional eye toggle on the confirm field
  • i18n: labels prop overrides match/mismatch text, placeholder, and toggle aria-labels
Not recommended for−2
  • ✕Login (single field — use Input)
  • ✕Single password without confirm (use PasswordInput)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "PasswordConfirmInput" })

Usage

import { PasswordConfirmInput } from '@/components/inputs/password-confirm-input';

<PasswordConfirmInput
  password={pw}
  onPasswordChange={setPw}
  confirm={cf}
  onConfirmChange={setCf}
  layout="stacked"
  passwordOptions={{ required: true, minLength: 12, requireSpecial: true, showGenerator: true }}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
password

Primary password value

string—
onPasswordChange

Primary value callback

function—
confirm

Confirm value

string—
onConfirmChange

Confirm value callback

function—
passwordOptions

Forwarded to PasswordInput

PasswordInputProps—
layout

Field layout

'stacked' | 'side-by-side'—
showConfirmToggle

Eye toggle on confirm

boolean—
onValidityChange

Validity + error[] callback

function—
labels

Override built-in UI strings (i18n)

Partial<PasswordConfirmInputLabels>—

Related

Platform docsAll componentsSource files