Components Inputs Input Password

Input Password

Overview API Examples Style Tokens

Basic usage

Negative mode

The Input Password component supports a negative mode, suitable for areas with dark background.

Prefilled value

You can initialize the Input Password component with a prefilled value.

Sizes

The Input Password component comes with two built-in sizes: comfortable and compact.

Shapes

The Input Password component comes with two built-in shapes: squared and rounded.

Displaying a hint

You can add a hint to be displayed below the Input Password.

Displaying an alert

You can add an alert to be displayed below the Input Password.

Displaying an error

You can define your own validators and error messages to be applied to the Input Password.

Defining a maximum length

By adding a maxLength validator to your FormControl, you can activate a counter displayed below the Input Password and automatically updated whenever the user inserts or deletes a character.

Hiding the Clear button

You can hide the Clear button, which by default is displayed whenever the field is not empty.

Placeholder

You can set a custom placeholder to be displayed whenever the field is empty.

Read-only state

The Input Password component supports a Read-only state, which makes the field unmodifiable but still focusable.

Disabled state

The Input Password component supports a Disabled state, complete with an information button with which you can provide useful details as to why the field is not operable.

Required state