Password input
Takes a password, masked, with an eye that shows what was typed. Use it wherever someone creates or enters a password; a plain masked Text input is for secrets nobody needs to check.
Live preview
Rendered by the component itself from the same generated tokens as the rest of the site.
<PasswordInput
label="Password"
size="lg"
helpText="At least 12 characters"
value={value}
onChange={(e) => setValue(e.target.value)}
/>Installation
Install it with the shadcn CLI, along with everything it uses. New project? Set it up first, as Quick start shows.
npx shadcn@latest add https://www.graphite-ui.com/r/password-input.jsonimport { PasswordInput } from '@/components/ui/password-input'Anatomy
Text input’s label, field and helper, the value masked, and the eye at the end of the field, 16 after the value. Pressing the eye shows the text and crosses the eye out; pressing it again masks it.
- FieldRequiredThe governed Text input, masked, with all of its sizes, layouts (fixed, inline, fluid), label, supporting text and states.
- Show toggleRequiredThe kit's 16px fi-rs-eye at the end of the value row, 16 after the value; fi-rs-eye-crossed while the text shows. A button named "Show password" with aria-pressed. In Error and Warning the status glyph comes before it, as the kit draws them.
Variants
The field is Text input’s, so every Style and Size is: Fixed puts the label above, Inline beside, Fluid inside a 64px box; Large, Medium and Small are 48, 40 and 32.
States
Text input’s states. Error and warning put the status glyph before the eye, as the kit draws them. The eye still works when the field is read-only, and is disabled with the field.
API reference
Generated from the contract, versioned with it, and checked by drift-check. This table cannot describe props the component does not have.
| Prop | Type | Default | Notes |
|---|---|---|---|
| Text input's props | — | — | Everything Text input takes except type and trailing, which Password input owns. |
| Show text | — | — | The kit's Show text axis is the reader's toggle, not a prop; the field starts masked. |
Design tokens
Every swatch is live. Change the source color in the header and this table repaints, because it reads the same roles the component does.
on-surfaceThe eye (Icon/icon-primary).primaryThe eye's focus ring, through primary-focus, and its disabled tone, through primary-disabled-content (Icon/icon-disabled).
Usage
The contract's prohibitions, written as the choices you will actually face.
Do
- Say what a new password needs in the helper text, before the reader types.
- Warn when Caps Lock is on; it is the commonest reason a password fails.
- Let browsers and password managers fill it: the field keeps autocomplete.
- Use it for both creating and entering a password.
Don’t
- Show the password by default. The field starts masked.
- Block pasting. Password managers paste.
- Use it for a secret no one needs to read back. That is a masked Text input.
- Restyle the field. It is the governed Text input.
Accessibility
What the component does for you, and what it leaves to you.
- Roles
- A labelled text input of type
password, switching totextwhile shown, and a button after it. - Toggle
- Named “Show password”, with
aria-pressedcarrying whether the text shows andaria-controlspointing at the field. The name does not change. - Keyboard
- Tab reaches the field, then the toggle; Enter or Space toggles. Focus stays on the toggle.
- Focus
- The field takes Text input’s ring; the toggle a 2px
--graphite-primary-focusring.
Figma parity
The kit’s Password input page has two public sets, Default and Fluid. The code is one component over Text input; its layout picks the set.
| Kit axis | Values | Code | How it maps |
|---|---|---|---|
| Set | Default · Fluid | layout | fixed and inline for Default, fluid for Fluid. |
| Style | Fixed · Inline | layout | Text input’s fixed and inline. |
| Size | Large · Medium · Small | size | 48, 40 and 32. |
| State | Enabled · Focus · Error · Warning · Disabled | — | Text input’s, with errorText, warningText and disabled; focus is the field’s own. |
| State | Skeleton | — | No counterpart by rule. |
| Filled · Show text | Boolean | — | The value, and the reader’s toggle. |
| Label | Caption/1 | label | The kit’s Default label binds Caption/1, every other field Input Label; the same 12/16, so the code uses Text input’s. |