Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Password

v.1.0.0 | Saturn
Healthy
StorybookFigma

Field that allows entering and displaying password.

Component

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Label
Required
Indicates the information requested from the user.

2

Tooltip
Required
Opens a tooltip component.

3

Input container
Required
width
fluid (100% bounded by parent element) -
height
fluid (content). - _min height_ 48px - _border_ _border_50_.

4

Error icon
Required
The error icon is used to alert the user about an error.

5

Help text
Required
Classic help text to give some more idea or condition about what is requested. It aligns to the left side.

6

Text
Required
The text inside the field comes in two versions: it is empty state text that is replaced by user information later.

7

Bullets
Required
Hidden text will be shown with bullets.

8

Show icon
The input can contain an icon to show or hide the password entered by the user.

9

Placeholder text
Helps the user understand the information that is requested. It can be hidded when the input is empty, in order to avoid confussion to the user

States

Default empty

  • A default state communicates an interactive component or element.

    • Default filled

  • The component with user information already entered.

    • Active empty

  • If we click or tap on the input, which will enter an active state allowing us to edit the placeholder information.

    • Active filled

  • If we click or tap on the input, which will enter an active state allowing us to edit the placeholder information.

    • Error empty

  • The error state communicates that something is not right. In the case of input, it can usually be due to formatting errors or that the field is empty and must be completed.

    • Error filled

  • The error state communicates that something is not right. In the case of input, it can usually be due to formatting errors or that the field is empty and must be completed.

    • Keyboard focus empty

  • When the user looks for the focus through the keyboard it will put the input in this state, so they can start typing.

    • Keyboard focus filled

  • When the user looks for the focus through the keyboard it will put the input in this state, so that they can start typing.

    • Disabled empty

  • The input is not active and does not contain information.

    • Disabled filled / Disabled filled with related info

  • In this case the input is not active but contains information that the user has filled in previously or at another time.

    • Options

    Hidden password

  • By default, the input keeps the information entered by the user hidden to preserve their privacy and security.

    • Visible password

  • There is an option to display the password entered by the user.

    • Layout

    Flexible width and text growth

  • The component is flexible, being able to adapt to any width of grid or device that is needed. The help text can grow in a liquid way adapting to their containers.

    • Horizontal grouping

  • You can associate other elements to the input horizontally leaving 16px of separation like it shows in the input with action. If they are elements not directly associated to the input you must use the grid.

    • Behaviour

    Show password

  • The asterisk only appears with mandatory information. When the input is optional, this mark will be hidden and the optional prompt will appear.

    • Do's and dont's

    Foo

    Do’s

    Input text can show more than one line in label, placeholder or help text.

    Foo

    Caution

    Be carefull about using long labels in order to correctly display the requested information, as it can make the message difficult to understand.

    Input PasswordUsage
    Input PasswordCode API