Form
Input Password
Password field with a show/hide toggle. Extends Input Group with no extra markup.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/input-password
Examples
Show / hide toggle
A built-in eye button reveals the value — no extra markup needed.
Click the eye to reveal each field.
Live strength meter
Drive a strength bar from the controlled value as the user types.
Enter a password
Confirm match
Two fields with a live match check.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { InputPassword } from "@codefast/ui/input-password";
<InputPassword placeholder="••••••••" />
API reference
Props for each part of the component. All native element props are also forwarded.
InputPassword
Extends Input with a reveal toggle. Forwards all native input props.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onChange | string / (event) => void | — | Standard controlled input props. |
| disabled | boolean | false | Disables the field and the toggle. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- The reveal button is labelled and toggles aria-pressed for assistive tech.
- Set autoComplete (current-password / new-password) to help password managers.
- Associate a Label via htmlFor / id.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Offer the reveal toggle so users can check what they typed.
- Show password requirements and live feedback on sign-up.
Don’t
- Don’t block paste — it breaks password managers.
- Don’t impose arbitrary maximum lengths.