How to build an accessible PasswordInput in React

The reveal control is a real <button> whose aria-label switches between reveal/hide so screen-reader users know the current masking state; toggling swaps the input type between password and text so the platform handles masking natively.

When to use a PasswordInput

• Collecting a secret credential that should be masked by default with an opt-in reveal toggle
• Password creation flows that benefit from inline strength feedback

When not to use it

• Non-secret text — use Input
• A fixed-length one-time verification code — use OtpInput

Keyboard interactions

Role textbox, verified at WCAG 2.2-AA.

• Tab
• Shift+Tab

Common mistakes

Avoid: <Input type="password" />

Prefer: <PasswordInput showStrengthMeter />

PasswordInput adds an accessible reveal/hide toggle and an optional strength meter on top of the masked field, which a raw password input lacks

Example

<PasswordInput placeholder="Enter password" />

See the full PasswordInput reference →