Go Main page
Go Main page

Web components

cover

components

Input Phone

v.1.0.0 | Saturn

Field that allows users to enter phone numbers with the appropiate format.

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

Flag icon
Required
Flag of the country to which the telephone prefix corresponds.

5

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

6

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

7

Prefix text
Required
Phone prefix text.

8

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

9

Delete icon
The input can contain an icon which deletes all the information included by the user or a loader that we use when a proccess needs a few seconds to respond.

Foo

NameDescription

1

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

2

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

3

Prefix text
Required
Phone prefix text.

4

Chrevron
Required
By clicking on the button a dropdown with options will be display.

5

Selected
Shows which content has been selected by the user.

6

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

7

Default
Shows which information can’t be selected by the user.

8

Scroll bar
When more than 3 options are displayed, the scroll bar is used to navigate through the options.

States

Desktop, tablet and mobile

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

    Expanded

  • If we click or tap on the input, which will enter an active state allowing us to edit the placeholder information, and will display the dropdown just below the input with the different options to select.
  • Selected

  • User selected an option.
  • Loading first

  • When the database does not find results within 2 seconds, this loading status appears.
  • Loading second

  • When the user scrolls and the database does not find results within 2 seconds, this loading status appears.
  • Keyboard focus

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

    Expanded

  • If we click or tap on the input, which will enter an active state allowing us to edit the placeholder information, and will display the dropdown just below the input with the different options to select.
  • Selected

  • User selected an option.
  • Loading first

  • When the database does not find results within 2 seconds, this loading status appears.
  • Loading second

  • When the user scrolls and the database does not find results within 2 seconds, this loading status appears.
  • Keyboard focus

  • When the user looks for the focus through the keyboard it will put the input in this state, so that he can start typing.
  • 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.
  • 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.