
components
Input Phone
v.1.0.0 | SaturnField that allows users to enter phone numbers with the appropiate format.
Components
Play with the component with our playground.
Anatomy

Name | Description |
---|---|
1 Required | Indicates the information requested from the user. |
2 Required | Opens a tooltip component. |
3 Required | width height |
4 Required | Flag of the country to which the telephone prefix corresponds. |
5 Required | The error icon is used to alert the user about an error. |
6 Required | Classic help text to give some more idea or condition about what is requested. It aligns to the left side. |
7 Required | Phone prefix text. |
8 Required | The text inside the field comes in two versions: it is empty state text that is replaced by user information later. |
9 | 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. |

Name | Description |
---|---|
1 Required | width height |
2 Required | The text inside the field comes in two versions: it is empty state text that is replaced by user information later. |
3 Required | Phone prefix text. |
4 Required | By clicking on the button a dropdown with options will be display. |
5 | Shows which content has been selected by the user. |
6 | Classic help text to give some more idea or condition about what is requested. It aligns to the left side. |
7 | Shows which information can’t be selected by the user. |
8 | When more than 3 options are displayed, the scroll bar is used to navigate through the options. |
States
Desktop, tablet and mobile

Default emptyA default state communicates an interactive component or element.

Default filledThe component with user information already entered.

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

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

Error emptyThe 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 filledThe 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 emptyWhen the user looks for the focus through the keyboard it will put the input in this state, so they can start typing.

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

Disabled emptyThe input is not active and does not contain information.

Disabled filled / Disabled filled with related infoIn this case the input is not active but contains information that the user has filled in previously or at another time.
Desktop

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

SelectedUser selected an option.

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

Loading secondWhen the user scrolls and the database does not find results within 2 seconds, this loading status appears.

Keyboard focusWhen 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

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

SelectedUser selected an option.

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

Loading secondWhen the user scrolls and the database does not find results within 2 seconds, this loading status appears.

Keyboard focusWhen 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 growthThe 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 groupingYou 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

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

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