Overview

1
Standard
2
Filled — masked
3
Password visible
4
Skeleton

1

Password Description

2

Password

3

Password

4

States

The TextField state model with the password content: Standard and Active, each empty or filled (Figma names Standard `rest`), plus Disabled, Validation error and Skeleton. No data-loading state — the set does not stage one.

Standard · Active · Filled — live

Password Try it — focus, type, toggle the eye

1

1
One Live Specimen Focus floats the label (Main Body 16/20 → Compact Body 14/16) and raises the --border-active var(--sp-s2) inside border; typing masks every character as a bullet. The eye is already there in the empty field — the toggle never hides.

Show password states

Password

Hidden — bullets, eye-visibility-on

Password

Visible — plain text, eye-visibility-off

1

2

1
Password Hidden The default. Every character renders as a bullet; the eye shows eye-visibility-on — the name of the ACTION it will perform ("Show password").
2
Password Visible A persistent toggle: the plain text stays until the eye is pressed again — no hold-to-reveal, no auto re-mask, no re-mask on focus loss. The icon flips to eye-visibility-off, the name to "Hide password". The swap is instant by contract — no animation on either platform.

Error

Password At least 8 characters

1

2

1
Error Border --border-error — var(--sp-s2) inside; it does not disappear until the next validation, focused or not (the TextField contract).
2
Helper Turns Error --text-and-icon-error — the text and the warning-filled icon at 16×16. The message carries the error, never the colour alone — and never echo the entered password in the message.

Disabled

Password Description

1

1
The Toggle Stays, Inert Everything tints --text-and-icon-disabled; the eye remains visible but carries the real disabled attribute — on both platforms it stays rendered and non-interactive.

Skeleton

1

1
One Simple Rectangle --skeleton-on-white at radius var(--sp-s20) with the DS shimmer (--pattern-shimmer) — the whole box, no eye, no Description; the TextField skeleton contract. Recorded gap: iOS draws it at var(--sp-s24) radius.

Anatomy

The TextField anatomy with locked password content — "a separate component, not part of a standard TextField". The end slot is not configurable: it always hosts the Show Password Button (both platforms hardwire it — "do not pass one").

Parts

Password Description

1

2

3

4

5

1
Slot#1 Optional, off by default — "Only icons from the DS can be placed." var(--sp-s40) container, var(--sp-s24) icon, --text-and-icon-primary. Shown here for the anatomy.
2
Label Default text "Password". Compact mode floats it above the value; non-compact makes it the placeholder that hides on the first character — the TextField float contract.
3
Input Text — Masked "By default, it is hidden" — bullets in Main Body, --text-and-icon-primary; the caret adopts the same colour. The web masks with type="password" — the platform-correct secure semantic.
4
Show Password Button Fixed in the end slot: var(--sp-s48) tap, var(--sp-s24) icon, --text-and-icon-primary — eye-visibility-on ⇄ eye-visibility-off from icons/outlined/security.
5
Helper The TextField Description contract — hint text in Compact Body --text-and-icon-secondary; multiline, displayed in full; turns error with the 16 icon.

Layout

The TextField spacing model applies unchanged — box s56 min-height at radius s20 (both max ×130%), paddings s8/s8/s0/s8/s4, s16 with slots off, Helper s8/s16/s4. Only the password-specific geometry is annotated here; the full box markup lives on the TextField page.

Toggle geometry · RTL

Password

LTR — the toggle at the end edge

كلمة المرور

Show Password Button var(--sp-s48) × var(--sp-s48) — the tap size (“Tap size: s48x48”).var(--sp-s24) × var(--sp-s24) — the eye icon (“Icon size: s24x24”).var(--sp-s40) / var(--sp-s24) — the Slot#1 container / icon when enabled.
Overflow “Long text is hidden beyond the component's boundary. Truncation is not used.” The Helper is displayed in full and can occupy multiple lines.
RTL The chrome mirrors — the toggle moves to the start edge. The masked value is symmetric bullets, so no forced-LTR line is staged for the value (unlike PhoneField's digits).

Animation

Everything is the TextField motion contract — nothing password-specific is animated.

1
Label Float And Border The label floats 16/20 ⇄ 14/16 and the s2 border fades on --pattern-scale-medium-transform / --pattern-scale-medium-color — the TextField's recorded compositor-guidance deviation applies as-is. Recorded divergence: iOS animates its compact float at 250 ms (medium1) instead of the family's 400 ms Scale Medium.
2
The Toggle Is Instant Mask ⇄ plain text and the eye icon swap render instantly on both platforms — no transition, by contract. No press animation on the field; the toggle carries the platform-native press feedback.
3
Skeleton The shimmer sweeps on --pattern-shimmer, zeroed under reduced motion at the token.

Password

Focus to float the label; toggle the eye — the swap is instant

Usage

1
Any Password Entry Login, registration (pair with a confirm field), changing a password, unlocking a protected action. The web reference sets autocomplete (current-password / new-password) so password managers engage.
2
Not For Codes Or PINs One-time codes are the InputCode line (digits are not a secret to mask); PIN pads are a keypad pattern; general text is TextField, phone numbers PhoneField.
3
No Meters Inside The Field Neither platform ships a strength meter or caps-lock hint — those are the host screen's content below the field, never a modification of the component.

Password

✓ Login — autocomplete="current-password" hands the value to the password manager

Password “qwerty” is too common

✕ The error message echoes the entered password — never repeat the secret anywhere

Accessibility

Two focus stops: the secure field and the toggle. Full spec: password-field-a11y.md.

Semantics

1

2

1
A Secure Field By Type type="password" — screen readers announce a protected edit field and never echo typed characters; the Figma voiced preview is [Password, Helper, Double-tap to enter text], Role EditText. The box pairs for= → id explicitly (the family rule — the end slot is a real button inside the box).
2
The Toggle Names Its Action A real <button>: “Show password” ⇄ “Hide password” — the label swaps with the icon (both platforms ship exactly these strings); the eye SVG is aria-hidden. Focus stays on the button through the swap.
Never Announce The Value No aria-live anywhere near the input — revealing must not speak the password unprompted. The platform extremes are recorded: iOS hides the whole subtree from VoiceOver (the toggle is a custom action); Android announces the bullet string — the length leaks — and the raw value when revealed. Both flagged.
Native Disabled And Skeleton The real disabled attribute on the input and the toggle; the skeleton box is aria-hidden under an aria-busy container. The Edge native reveal control is hidden — one toggle, the DS one.
Contrast Value and eye on --surface-on-white: ≈ 14.7:1 Day (Primary); Label/Helper ≈ 5.0:1 (Secondary) — the TextField measurements hold. The error pair stays the family-known red flag (≈ 3.5:1 Day, under the small-text floor).