Default
Show the codeHide the code
Default, code
<PasswordField defaultValue="correct horse battery" />PasswordField
A password input with a 44px show toggle. Paste and password managers always work.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Password input with a toggle button (aria-pressed)
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
New password
At least 12 characters. A long phrase is easiest to remember.
Show the codeHide the code
New password, code
<PasswordField
label="New password"
autoComplete="new-password"
hint="At least 12 characters. A long phrase is easiest to remember."
/>Invalid
Error: Enter your password
Show the codeHide the code
Invalid, code
<PasswordField isInvalid errorMessage="Enter your password" />Disabled
Show the codeHide the code
Disabled, code
<PasswordField isDisabled defaultValue="secret" />Tokens
The 6 design tokens PasswordField reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 6 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.icon.default | … | --sd-color-icon-default |
| input.height | … | --sd-input-height |
| input.radius | … | --sd-input-radius |
| target.min | … | --sd-target-min |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { PasswordField } from "@superduperui/react"Props
PasswordField also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
label | stringDefault 'Password' | Visible label. Default "Password". |
hint | string | |
errorMessage | string | ((validation: ValidationResult) => string) | |
autoComplete | 'current-password' | 'new-password'Default 'current-password' | "current-password" (sign in, the default) or "new-password" (sign up, change password), so password managers fill or generate. |
hideLabel | boolean | |
inputRef | Ref<HTMLInputElement> |
When to use it
Use it for
- Sign in (autoComplete current-password)
- Sign up and change password (autoComplete new-password)
Use something else for
- One-time codes: use CodeInput
- Secrets people copy, such as API keys: use TextField with a copy button
Accessibility
Screen readers announce "Password, secure edit text"; the toggle "Show password, toggle button, not pressed".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Never block paste
- Offer a passkey or email code before the password where you can
Shared patterns it ships with: 3.3.9 (paste allowed, managers fill it, show toggle).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 75 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 34 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 36 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the password input (a native password input has no ARIA role; the toggle starts unpressed) |
| Tab | Tab reaches the Show password toggle |
| Space | Space shows the password (the input becomes a text box) |
| Enter | Enter hides it again |
In Figma
The Figma component is PasswordField, with State (Default, Hover, Focus, Disabled, Invalid); Label visibility (Visible, Hidden); Shown (Hidden, Shown). The Figma library isn’t published yet.
Figma to code: State (Default, Hover, Focus, Disabled = isDisabled, Invalid = isInvalid); Label visibility → hideLabel (Visible = false, Hidden = true); Shown (Hidden, Shown; preview only); Value → defaultValue; nested Label → label; nested Hint → hint; nested FieldError → errorMessage.