i

Password input

Entering · researched

A field that masks what is typed, with a control to show or hide it.

molecule · contains text-input, button

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Input.Password native: yes antd 6.6.5
Variants
outlined, borderless, filled, underlined
Sizes
large, medium, small
States documented
disabled, error
Accessibility guidance
no

Native input switching type password/text via a visibility toggle icon.

1 corrected on re-read
  • states_documented: ["error"] → ["disabled","error"] Input API: disabled; status error|warning

docs ↗ · code ↗

Carbon

Password input native: yes @carbon/react 1.117.0
Variants
—
Sizes
sm, md, lg
States documented
default, hover, focus, active, disabled, error, loading
Accessibility guidance
yes

Native input with a show/hide toggle button in a Tooltip. Source sits in TextInput/PasswordInput.tsx (the index's PasswordInput dir only re-exports); documented on the Text input page. FluidPasswordInput is the fluid variant.

3 corrected on re-read
  • sizes: ["xs","sm","md","lg"] → ["sm","md","lg"] Text input style Size table lists sm, md, lg; xs exists only in source prop type
  • states_documented: ["hover","focus","disabled","error"] → ["default","hover","focus","active","disabled","error","loading"] Text input States table: Enabled, Active, Focus, Error, Warning, Disabled, Skeleton, Read-only; password style shows hover
  • urls: {"docs_url":"https://carbondesignsystem.com/components/text-input/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TextInput"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/text-input/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TextInput"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/text-input/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

Password input native: yes govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
default, focus, error, disabled
Accessibility guidance
no

Builds on the Input and Button macros: native input plus a button to show or hide the password. Index also mapped the Passwords pattern as an instance; it is guidance, not a component.

docs ↗ · code ↗

Material Web

Text field, type="password" subset native: yes @material/web 2.5.0
Variants
filled, outlined
Sizes
—
States documented
disabled, error
Accessibility guidance
yes

Index missed it. type=password masks input; the show/hide control is not built in: the docs example slots an md-icon-button toggle into trailing-icon for the author to wire. Accessibility section covers text fields in general.

docs ↗ · code ↗

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No password input component. TextInput accepts native input types but docs show no show/hide control. Checked: primer.style/product/components/ index, internal-components list, ui-patterns, packages/react/src tree (incl. deprecated/, experimental/, internal/).

Spectrum

absentSpectrum does not ship this component. Nothing is drawn in its place.

Checked the sitemap.xml component list, S2 exports (TextField), SWC 1st-gen textfield and spectrum-css for a masked field with show/hide: none. Text field accepts type password (SWC textfield source references it), but no reveal control. Index also lists none.

USWDS

Password show/hide toggle (usa-show-password) variant native: yes @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default
Accessibility guidance
no

Index mapped it as a part with status internal, and said not shipped. The toggle is an internal package (_usa-password) with Show password / Hide password button text and a script that flips the input type; the only documented use is the Sign-in form template. Not a standalone documented component; no dedicated password field.

1 corrected on re-read
  • builds_on_native: "partly" → "yes" native button.usa-show-password toggles input type=password; no role override

· code ↗

Platform facts

Native elementinput type=passwordSpec: the user agent 'should obscure the value'; no newlines allowed. MDN input password: use autocomplete current-password or new-password so browsers and password managers can fill; 'Some browsers display the typed character for a moment before obscuring it, while others allow the user to toggle the display of plain-text on and off.' So a show/hide toggle can be a browser feature; a page-level show/hide button is an author addition (APG Button toggle with aria-pressed is a candidate, not stated for passwords).
Baseline—
APG patternbutton
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. label — HTML label element.
  2. text field — Spec: 'a one line plain text edit control'; value obscured.
  3. show/hide control optional — MDN: some browsers provide a plain-text toggle themselves; an author-added button is not defined by HTML or APG.

The seven states

default Value masked.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Receives text entry.
active n/a — No distinct pressed state; the show/hide button has one.
disabled disabled attribute.
error MDN: :invalid with minlength/maxlength/pattern/required; message text is the author's.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 5 of 35 fields changed on the second read — open any “corrected” note to see what it said before.