build69
build69  /  Components  /  Text Inputs  /  PasswordConfirmInput

PasswordConfirmInput

v1.0.11Updated 4 Oct 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 · 8 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>—
id

DOM id of the primary password input (passwordOptions.id wins); FormField clones its field id in, so its label names the first box

string—
aria-invalid

Mark the field invalid from outside; the box paints the same destructive state as its own validation, with the alert in its own trailing slot (FormField clones this in from its error prop)

boolean—
aria-describedby

Id(s) of outside hint or error text, kept alongside the messages the field owns (FormField clones this in)

string—
aria-required

Mark the input required for assistive tech (FormField clones this in from its required prop)

boolean—
aria-label

Accessible name where the layout has no room for a visible `label` — a filter row, a subscribe box beside its button. Prefer `label`: a visible one names the field for everybody. These components destructure a fixed prop set and used to DROP an aria-label a caller wrote, so such a field announced as nothing but its role.

string—

Related

Platform docsAll componentsSource files