Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input

v.1.0.0 | Saturn
Healthy
StorybookFigma

Field that enables a user to interact and input data. It is used to enter non-standardized responses

Small elements that represent an input, attribute or action. They allow users to enter information, make sections, filter content or trigger actions.

Components

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

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

6

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.

7

Label secondary
This text is displayed to the right of the label when the input is not mandatory to filled.

8

Action link
It is possible to have an action link if the content is too large for a tooltip .

9

Information associated icon
Helps contextualize the user in relation to the information that appears in this input.

10

Information associated text
When the name is longer than two lines, will be truncate with ellipsis.

11

Information associated container
In some cases, when the user enters data in the input, a (non-clickable) block with related information is displayed below, such as the name of the bank related to the account number.
width
and
height
fluid (100%bounded by parent element) - _min height_ 48px.

States

Default empty

  • A default state communicates an interactive component or element.

    • Default filled / Filled with related info

  • This is the input when is filled and contains information. In some cases, when the user enters data in the input, a (non-clickable) block with related information is displayed below, such as the name of the bank related to the account number.

    • 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.

    • Loading

  • This state communicates a noninteractive component. An animated loader is displayed at the right of the imput container in order to inform the user that the text he had typed is being processed or saved.

    • 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 that he 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 he can start typing.

    • Disabled empty

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

    • Disabled filled / Disabled filled with related info

  • A default state communicates an interactive component or element.

    • Options

    Mandatory information

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

    • With a tooltip

  • To explain the label, it is possible to add a Tooltip.

    • With an action

  • When the label needs more space for extra information than the tooltip has, we use the Button in the Action version. When the user click on it, a modal window will open.

    • Layout

    Truncated text

  • The placeholder text must be truncated in case it cannot be completely displayed.

    • Label with tooltip or action

  • As the Tooltip, the Action will be placed next to the last word in the label. Exceptionally, the Action is moved to the third line when cannot coexist with the label in two lines.

    • 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.

    • Vertical grouping

  • In vertical groupings, the inputs must keep a distance between them of 24px.

    • 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.

    • Behaviours

    While typing

  • When the user is typing in the input and the text are longer than the width of the field, the text will hidden to the left side. After finishing typing, the text will be truncated.

    • Do's and dont's

    Foo

    Do’s

    When the text inside the input is too long, it must be truncated.

    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.

    InputUsage
    InputCode API