A text field for a password or a passphrase, with a button at its end that shows and hides what is typed.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
sizesmbk-password-field--size-<value> | mdsm | md | The input’s two heights, with its padding and text. The button’s eye is 16 px at both; at sm the button is a 24 px square, so it fits inside the small well. Small text never goes under 16 px on a phone. |
errorsmbk-password-field--error | On or off | Off | The password is wrong or breaks a rule. Draws the danger border, kept while focused, and the error icon before the button. |
Examples
Usage
A sign-in password in a field. Type with Caps Lock on and the field says so under it; the eye shows what is typed.
Shown
Shown, the password is plain text and the button offers to hide it again.
Creating a password
A new password asks the password manager for a strong one, and the rules sit in the help text before the first try.
Caps lock notice
The Caps Lock notice is the field’s warning: a line of its own, read out when it appears.
Error
The input’s error look, with the warning icon before the button. The message never says which of the two was wrong.
Disabled
The field and its button are dimmed and out of reach.
Guidelines
Purpose
A text field for a password or a passphrase. It hides what is typed and has a button at its end that shows it, so the reader can check a long password before sending it instead of typing it again. Everything else is the input's: the well, the sizes, the states and the error look.
When to use
- Signing in, and choosing or changing a password.
- Any secret the reader types and may want to check: a passphrase, a recovery code.
When not to use
- A code the reader copies from a message and never needs to hide, such as a one-time code. Use the input.
- A key or a token the page shows for copying. Use the input, read-only, with a copy button in its trailing action.
Usage rules
Do
- Put the password's rules in the field's help text, so they are known before the first try.
- Pass
new-passwordwhen the form creates a password.
Don't
- Block pasting into the field: it stops password managers and long, safe passwords.
- Ask the reader to type a new password twice when the field can show it.
Put the password’s rules in the help text, so they are known before the first try.
Rules kept back until an error make the reader guess, then type it all again.
Anatomy
- The block, always on the input's well: its markup carries the input's classes as well as its own.
- The control part, a native password control, which is also the input's control part. It shows dots while the password is hidden and the words while it is shown.
- In error, the input's error icon, a warning sign before the button.
- The toggle part, a ghost icon button in the input's trailing action: an eye while the password is hidden, an eye with a line through it while it is shown. At the medium size it is the small icon button; at the small size it is the extra-small square, with the same 16 px eye, so it fits inside the small well.
Behavior
The password starts hidden. Pressing the button shows it as plain text and turns the eye into a crossed-out eye; pressing it again hides it. Nothing else changes: the value stays, the field keeps its size, and the reader keeps typing where they were. Pressed with a mouse while typing, the focus stays in the field; reached with Tab and pressed with Enter or Space, the focus stays on the button. Sending the form hides the password again first, so the browser never keeps it as plain text.
The wrapper holds its own state, or follows the state the page gives it and reports each press. A long password scrolls inside the field and never widens it.
The control asks the browser's password manager for the saved password unless given another autocomplete: a form that creates a password passes new-password, so the manager offers a strong one. Pasting is always allowed, and the control never corrects, capitalizes or checks the spelling of what is typed.
The field can say when Caps Lock is on: it reports Caps Lock each time a key is pressed in it, and reports it off when the field loses focus. The page shows the notice as the field's warning, under the help text.
A disabled field disables its button too. A read-only field keeps the button, so the value can still be read.
Accessibility
What it does for you
- In development, a password field with no name logs a warning in the console.
- The button says what it will do: "Show password" while the password is hidden, "Hide password" while it shows. Its name changes rather than a pressed state, so a screen reader hears the action, not a state to work out.
- The button comes after the field in the Tab order and draws the system's focus ring.
- A screen reader hears the field as a secure text field while the password is hidden and as a text field while it shows.
- A Caps Lock notice shown as the field's warning is read out when it appears, without cutting in.
- Pressed with a mouse while typing, the button leaves the focus in the field; reached with Tab and pressed, the focus stays on the button.
What you must do
- Give it a label like any input; inside a field it has one.
- Pass
showLabelandhideLabelfor another language or for "Show passphrase". - Write an error that says what to put right, without saying whether the name or the password was the wrong one.
How to test
- Tab to the field, then Tab again: the button takes focus and shows the focus ring. Press Enter, then Space: the password shows, then hides, and focus stays on the button.
- With a screen reader, the hidden field is read as a secure text field, and the button as "Show password" or "Hide password", whichever it will do.
- Turn Caps Lock on while typing: the notice is read out when it appears.
- With text at 200% and the page 320 pixels wide, a long password scrolls inside the field and the button stays beside it.
- In a forced-color mode, the field's focus border and the button's focus ring stay visible.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the field, then to the show and hide button. |
| EnterorSpace | On the button, shows or hides the password. |
Source
The files the password field is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-password-field — Password field. Figma "Password input" 7106:682.
* Built on the input: the block always sits on an smbk-input well, the native
* control is the input's control part, and the show and hide button is a ghost
* icon button in the input's trailing action. The padding, the text, hover,
* focus, error, disabled and the two sizes are the input's own, so a change to
* the input reaches the password field. This stylesheet adds only what the
* button needs. */
/* Some browsers draw a reveal button of their own inside a password control; the field has its own, so
there is one, in the same place, in every browser. */
.smbk-password-field__control::-ms-reveal,
.smbk-password-field__control::-ms-clear {
display: none;
}
/* Small: Figma puts the 32 px button in the 32 px well, which would cover the well's edge. The button here
is the 24 px square, with the 16 px eye Figma draws, and the margin gives back the rest of Figma's 32 px
place, so the eye sits where Figma draws it. Two classes on the icon, so it wins over the button's own
small icon whichever stylesheet loads first. */
.smbk-password-field__toggle.smbk-btn--size-xs {
margin-inline: calc((var(--smbk-size-control-sm) - var(--smbk-size-control-xs)) / 2);
}
.smbk-password-field__toggle.smbk-btn--size-xs .smbk-btn__icon {
font-size: var(--smbk-size-icon-sm);
}
/* ---- touch: the small toggle stops halfway to the value ----
The toggle takes an invisible press area on a touch screen; toward the value it reaches only halfway into the gap,
which in the small field is the well's gap and the margin that gives back the rest of the small control's place.
Nothing drawn moves. */
@media (pointer: coarse) {
.smbk-input--size-sm > .smbk-input__control + .smbk-input__trailing-action > .smbk-password-field__toggle.smbk-btn--size-xs::after {
inset-inline-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), (var(--smbk-space-inline-sm) + (var(--smbk-size-control-sm) - var(--smbk-size-control-xs)) / 2) / -2);
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| size.control.sm--smbk-size-control-sm | comfortable: 32pxcompact: 28pxchanges with density | Size | |
| size.control.xs--smbk-size-control-xs | 24px | Size | |
| size.icon.sm--smbk-size-icon-sm | 16px | Size | |
| size.target.comfortable--smbk-size-target-comfortable | 44px | Size | |
| space.inline.sm--smbk-space-inline-sm | comfortable: 6pxcompact: 4pxchanges with density | Spacing |
Manifest
{
"name": "password-field",
"block": "smbk-password-field",
"summary": "A text field for a password or a passphrase, with a button at its end that shows and hides what is typed.",
"adapt": "css",
"axes": {
"size": {
"values": [
"md",
"sm"
],
"default": "md",
"description": "The input’s two heights, with its padding and text. The button’s eye is 16 px at both; at sm the button is a 24 px square, so it fits inside the small well. Small text never goes under 16 px on a phone."
}
},
"flags": {
"error": {
"description": "The password is wrong or breaks a rule. Draws the danger border, kept while focused, and the error icon before the button."
}
},
"parts": [
"control",
"toggle"
],
"figmaNodeId": "7106:682"
}