Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Date

v.1.0.0 | Saturn
Healthy
StorybookFigma

Field that help users navigate dates, selecting specific date.

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

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

4

Calendar icon
Required
From development, the vertical has to include the calendar.

5

Input container
Required
width
fluid (100% bounded by parent element) -
height
fluid (content).

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

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

States

Default empty

  • A default state communicates an interactive component or element.

    • Default filled / Filled with related info

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

    Regular input

  • In this variable there is more than one prefix, so the container of the prefix will be clickable for a dropdown to appear and therefore, being interactive, it will go with the border.

    • Hidded placeholder in empty input

  • The placeholder text is an optional element that can be hidded when the input is empty, in order to avoid confussion to the user.

    • Layout

    Relate your input to other elements on the screen

  • You can add title tags or other free text with links below the post and keep 8px distance between elements.

    • Group layout in case of error

  • When an input changes state and this means that it increases its height (as is the case with the error state for always carrying a feedback text) the new height of the input will push all the content below it downwards to continue maintaining 32px away from the rest of the elements that follow.

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

    • Relates the input to the Calendar

  • You can link this input to the calendar as long as you place it keeping the defined distance of 16px.

    • Behaviours

    Enter date

  • The user will be able to enter numerical values without the need to enter special characters such as date division bars.

    • Fill format

  • This could be a general example of filled input. This information may not be the same in all programs.

    • Optional response cases

  • In cases where responding is optional, add "(optional)" to the input label.

    • Date ranges

  • When selecting a date range, two inputs will be used. When the calendar is displayed, it will expand to fill the width of the parent container, which will correspond to the width of the two inputs.

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

    Input DateUsage
    Input DateCode API