On this page:

Password Input

Note

An input field for entering sensitive strings such as passwords with masked visibility.

password-input

Design checklist

Status	Item	Description
✔️	Anatomy	Includes descriptions of all parts of the component and its major variants.
	States	Includes all applicable interaction, display and value states.
✔️	Options	Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.)
✔️	Color schemes	Includes both light and dark color schemes.
	Behaviors	Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow).
	Accessibility: Keyboard interactions	Includes descriptions of all keyboard interactions, focus indication and navigation order.
	Accessibility: Text contrast	Text meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA).
	Accessibility: UI component contrast	Visual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA).
	Usage guidelines	Includes a list of recommended and discouraged usages.
	Content guidelines	Includes content standards and guidelines for how to write or format in-product content for the component.
	Internationalization	Includes support for various locales and bi-directionality (RTL).
	Design tokens	All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

Anatomy

Default

Field: The outermost encompassing element.
Icon: An optional visual element that represents the input field.
Placeholder: A temporary text provides hints for the expected input.
Input value: The value entered by the user.
Password visibility button: A button that toggles the visibility of the sensitive string.
Clear button: An optional button that clears the input value.

anatomy

Floating label

Label: A text label that transitions from an in-field placeholder to a label above the field when focused or filled.

anatomy2

States

Field

Interaction states

Enabled

Interaction with the input field is available.

enabled

enabled2

Hovered

The cursor is currently positioned over the input field, indicated by the text cursor and a slightly different border color.

hovered

hovered2

Focused

The input field is focused via keyboard or mouse interaction, indicated by a thickened border.

focused

focused2

Read-only

The input field is not editable, but its content can still be selected.

readonly

readonly2

Disabled

Interaction with the input field is disallowed, indicated by a muted appearance.

Value states

Empty

The field does not contain any input value.

empty

empty2

Filled

The field contains some input value.

filled

filled2

Invalid

The input value does not meet specified criteria, indicated by a red border color and an error message.

invalid

invalid2

Display states

Plaintext

The sensitive string is displayed as plaintext.

plaintext

plaintext2

Masked

The sensitive string is masked by bullet characters.

masked

masked2

Password visibility button

Default: The button is visible and indicates the action to be performed (show or hide password).
Hovered: The button changes appearance to indicate that it is interactive.
Pressed: The button shows a pressed state.
Disabled: The button is not interactive and appears muted.

passwordVisibilityButton

passwordVisibilityButton2

Clear button

This sub-component has the same states as [[Button]].

clearButton

clearButton2

Options

Layering

Password inputs are available in default or alternative [[Layering]].

layerDefault

alternative

Size

Small and medium password inputs differ in field height.
Medium is the default password input size.

small

medium

Floating label

A label can be optionally included within the input field, which will increase its height.
The label is maximized within the middle of the field when the input value is empty and the input field has not received focus.
The label is minimized and floats towards the top when the input field receives focus.

floatingLabel

Placeholder

A placeholder text can be optionally displayed for the purpose of providing the user an input hint.

placeholder

Toggle visibility button

By default, password inputs include a toggle button which displays the sensitive string in plaintext when on and masks it when off.
Toggle visibility button can be optionally omitted.

toggleVisibilityButton

toggleVisibilityButton2

Clear button

A clear button can be added to the input field to allow quick clearing of the entered value when clicked.

clearButtonOption

Icon

An icon can be optionally added to the leftmost position within the input field.

icon