New features: This page contains new features. See DESY-165 for details.

Password

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

The password field masks input by default. It features a trailing icon that allows users to toggle visibility and reveal their entry.

Anatomy

Label
Mandatory (optional)
Container
Helper text
Help label
Info icon (optional)

States

Enabled
Hover
Focused
Error
Error focused
Disabled
Show password
Read only
Selected

Example
HTML

Password

Change this to a short description

Password

Change this to a short description

Password

Change this to a short description

Password

Change this to a short description

Password

Change this to a short description

Password

Change this to a short description

Password

Change this to a short description

Password

Change this to a short description

Password

Change this to a short description

development/documentation/docs/password/examples/states.html

<div class="d-flex flex-wrap gap-24">
	<!-- 1. Enabled -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">1</span>
		<label for="pwStateEnabled">Password</label>
		<div class="password-input">
			<input type="password" class="form-control" id="pwStateEnabled" aria-describedby="pwStateEnabledHelp" required>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateEnabledHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 2. Hover -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">2</span>
		<label for="pwStateHover">Password</label>
		<div class="password-input">
			<input type="password" class="form-control hover" id="pwStateHover" aria-describedby="pwStateHoverHelp" required>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateHoverHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 3. Focused -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">3</span>
		<label for="pwStateFocused">Password</label>
		<div class="password-input">
			<input type="password" class="form-control focus" id="pwStateFocused" aria-describedby="pwStateFocusedHelp" required>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateFocusedHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 4. Error -->
	<div class="form-group required has-error docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">4</span>
		<label for="pwStateError">Password</label>
		<div class="password-input">
			<input type="password" class="form-control" value="password123" id="pwStateError" aria-describedby="pwStateErrorHelp" required>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateErrorHelp" class="help-block"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Change this to a short description</span>
	</div>

	<!-- 5. Error focused -->
	<div class="form-group required has-error docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">5</span>
		<label for="pwStateErrorFocused">Password</label>
		<div class="password-input">
			<input type="password" class="form-control focus" value="password123" id="pwStateErrorFocused" aria-describedby="pwStateErrorFocusedHelp" required>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateErrorFocusedHelp" class="help-block"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Change this to a short description</span>
	</div>

	<!-- 6. Disabled -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">6</span>
		<label for="pwStateDisabled">Password</label>
		<div class="password-input">
			<input type="password" class="form-control" id="pwStateDisabled" aria-describedby="pwStateDisabledHelp" disabled>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false" disabled tabindex="-1">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateDisabledHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 7. Show password (aria-pressed="true" shows eye-off icon) -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">7</span>
		<label for="pwStateShowPassword">Password</label>
		<div class="password-input">
			<input type="text" class="form-control" value="password123!" id="pwStateShowPassword" aria-describedby="pwStateShowPasswordHelp" required>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Hide password" aria-pressed="true">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateShowPasswordHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 8. Read only -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">8</span>
		<label for="pwStateReadonly">Password</label>
		<div class="password-input">
			<input type="password" class="form-control" id="pwStateReadonly" aria-describedby="pwStateReadonlyHelp" readonly>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false" disabled tabindex="-1">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateReadonlyHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 9. Selected — uses .selected (1 px purple) to mirror the live mouse-focus look (input-method distinction; .focus paints the 2 px keyboard look). -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">9</span>
		<label for="pwStateSelected">Password</label>
		<div class="password-input">
			<input type="password" class="form-control selected" value="password123" id="pwStateSelected" aria-describedby="pwStateSelectedHelp" required>
			<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
				<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
			</button>
		</div>
		<span id="pwStateSelectedHelp" class="help-block">Change this to a short description</span>
	</div>
</div>

Label

A label is required for all password fields and defaults to "Password." If an adjacent text element already serves as the label, the included default label can be visually hidden.

Example
HTML

Password

development/documentation/docs/password/examples/default.html

<div class="form-group required">
	<label for="pwDefault">Password</label>
	<div class="password-input">
		<input type="password" class="form-control" id="pwDefault" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
</div>

Helper text

Helper text communicates requirements and disclaimers below the field. An error message will always replace the helper text when a field validation error is triggered.

Example
HTML

Password

Password must have at least 8 characters

development/documentation/docs/password/examples/with-helper-text.html

<div class="form-group required">
	<label for="pwHelperText">Password</label>
	<div class="password-input">
		<input type="password" class="form-control" id="pwHelperText" aria-describedby="pwHelperTextHelp" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
	<span id="pwHelperTextHelp" class="help-block">Password must have at least 8 characters</span>
</div>

Error message

Upon validation failure, the helper text is replaced by a concise error message. This message includes an error icon and provides direct instructions to help the user satisfy the password requirements.

Example
HTML

Password

Password must have at least 8 characters

development/documentation/docs/password/examples/error-state.html

<div class="form-group required has-error">
	<label for="pwError">Password</label>
	<div class="password-input">
		<input type="password" class="form-control" value="password123" id="pwError" aria-describedby="pwErrorHelp" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
	<span id="pwErrorHelp" class="help-block"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Password must have at least 8 characters</span>
</div>

Privacy toggle

Use the privacy icon to toggle password visibility for easy review. The icon always represents the action it will perform upon interaction, meaning: a hidden password shows the 'Show' icon, and a visible password shows the 'Hide' icon.

Hovering the trailing icon button paints the hover surface on the button only — the surrounding input row stays in its enabled-state colours and does not enter the Hover state. The row only enters Hover when the input itself (not the toggle) is the hover target.

Example
HTML

Password

Change this to a short description

development/documentation/docs/password/examples/show-password.html

<div class="form-group required">
	<label for="pwShowPassword">Password</label>
	<div class="password-input">
		<input type="text" class="form-control" value="password123!" id="pwShowPassword" aria-describedby="pwShowPasswordHelp" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Hide password" aria-pressed="true">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
	<span id="pwShowPasswordHelp" class="help-block">Change this to a short description</span>
</div>

Accessibility

Keyboard interaction

All buttons should be reachable via Tab and Shift+Tab keys.

Example
HTML

Password

Change this to a short description

development/documentation/docs/password/examples/accessibility.html

<div class="form-group required">
	<label for="pwAccessibility">Password</label>
	<div class="password-input">
		<input type="password" class="form-control focus" id="pwAccessibility" aria-describedby="pwAccessibilityHelp" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
	<span id="pwAccessibilityHelp" class="help-block">Change this to a short description</span>
</div>

Specs

Password specifications with spacing and radius annotations

Developer reference

The following sections describe supported functionality that is not part of the Figma design specification.

Demo enabled on this page! The enhanced keyboard-focus behaviour is active on this page — the .keyboard-focus class is added to each .form-group while a control is keyboard-focused, and removed on blur, click or typing. Try pressing Tab to navigate through the form fields. Read more in the Forms accessibility guidelines.

Enhanced mode

Privacy toggle implementation

The password visibility toggle requires JavaScript. The design system provides CSS styling only — the consuming application is responsible for implementing the toggle logic (switching between type="password" and type="text") and updating the icon.

Markup

Wrap the <input> and the .password-toggle button in a .password-input element. The wrapper provides the position: relative context the toggle anchors to so the eye icon sits 16px from the input's right edge regardless of the surrounding column width. The wrapper carries the 520px max-width cap; the inner .form-control is max-width: none so it fills the wrapper. This mirrors the .input-group pattern used for numeric suffixes.

To allow a wider field, override .password-input { max-width: none; } in the consuming application.

Implementation guidance

Add a trailing button or icon element beside the input. On click, toggle the input's type attribute between "password" and "text". Update the icon to reflect the current state: use the 'eye' icon when the password is hidden (action: show), and 'eye-off' when the password is visible (action: hide).

Example
HTML

Password

Change this to a short description

development/documentation/docs/password/examples/show-password.html

<div class="form-group required">
	<label for="pwShowPassword">Password</label>
	<div class="password-input">
		<input type="text" class="form-control" value="password123!" id="pwShowPassword" aria-describedby="pwShowPasswordHelp" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Hide password" aria-pressed="true">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
	<span id="pwShowPasswordHelp" class="help-block">Change this to a short description</span>
</div>

Accessibility implementation

Always associate a <label> with the <input> using matching for and id attributes. For the privacy toggle button, use aria-label to describe its action (e.g. "Show password" or "Hide password").

Example
HTML

Password

development/documentation/docs/password/examples/default.html

<div class="form-group required">
	<label for="pwDefault">Password</label>
	<div class="password-input">
		<input type="password" class="form-control" id="pwDefault" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
</div>

Info icon

Wrap the <label> and an icon trigger in .label-with-info to place the info icon beside the label with the 8 px gap from the Figma anatomy. On hover or keyboard focus, the tooltip opens upwards (data-bs-placement="top") to reveal the supporting text.

Keep the trigger outside the <label for> so clicking the icon does not focus the input, and mirror the tooltip text into a visually-hidden element that the input references via aria-describedby — that way assistive tech users hear the same help text without depending on the tooltip.

Tooltip behaviour relies on Bootstrap's tooltip plugin (with Popper for positioning). See the Tooltips page for setup details.

Example
HTML

Password

Change this to a short description

development/documentation/docs/password/examples/info-icon.html

<div class="form-group required docs-form-state-width">
	<div class="label-with-info">
		<label for="pwInfoIcon">Password</label>
		<span class="spirisicon spirisicon-sm spirisicon-info" tabindex="0" aria-label="More information about Password" data-bs-toggle="tooltip" data-bs-placement="top" title="Use at least 8 characters, including a number and a symbol."></span>
	</div>
	<div class="password-input">
		<input type="password" class="form-control" id="pwInfoIcon" aria-describedby="pwInfoIconHelp pwInfoIconInfo" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
	<span id="pwInfoIconHelp" class="help-block">Change this to a short description</span>
	<span id="pwInfoIconInfo" class="sr-only">Use at least 8 characters, including a number and a symbol.</span>
</div>

Basic design

Default

A basic password field with a label. Apply the .form-control class to the <input type="password"> element and wrap it together with the .password-toggle button in a .password-input — see Privacy toggle implementation.

Example
HTML

Password

development/documentation/docs/password/examples/default.html

<div class="form-group required">
	<label for="pwDefault">Password</label>
	<div class="password-input">
		<input type="password" class="form-control" id="pwDefault" required>
		<button type="button" class="password-toggle btn btn-icon btn-sm" aria-label="Show password" aria-pressed="false">
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye"></span>
			<span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-eye-off"></span>
		</button>
	</div>
</div>

Legacy

A plain password field without the .password-input wrapper or the .password-toggle button. The input renders as a standard .form-control and the user cannot reveal the typed value. Use this only when the visibility toggle is not desired.

Example
HTML

Password

development/documentation/docs/password/examples/legacy.html

<div class="form-group required">
	<label for="pwLegacy">Password</label>
	<input type="password" class="form-control" id="pwLegacy" required>
</div>