components
Input Dropdown
v.1.0.0 | Saturn
StorybookField that allow users to choose from a list of options in a limited space.
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 | Background color may vary according to design needs. width height |
4 Required | The error icon is used to alert the user about an error. |
5 Required | By clicking on the button a dropdown with options will be display. |
6 | 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. |
Desktop
| Name | Description |
|---|---|
1 | Shows which content has been selected by the user. |
2 | Shows which information can’t be selected by the user. |
3 | Shows which information can’t be selected by the user. |
4 | When more than 3 options are displayed, the scroll bar is used to navigate through the options. |
Tablet and mobile
| Name | Description |
|---|---|
1 Required | Container that shows the text label of the input and the possibility of closing. |
2 | Shows which content has been selected by the user. |
3 | Shows which information can’t be selected by the user. |
4 | Shows which information can’t be selected by the user. |
| Name | Description |
|---|---|
1 | Shows which content has been selected by the user. |
2 | Shows which information can’t be selected by the user. |
3 | Shows which information can’t be selected by the user. |
4 | 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.
LoadingThis 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 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 that he 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 he can start typing.
Disabled emptyWhen 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 infoA default state communicates an interactive component or element.
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.
Empty resultsWhen the system didn’t found results for the conditions inserted by the user.
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.
With autocomplete search inputUsers can search and it will show up an autocomplete result.
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.
Options
Mandatory informationThe asterisk only appears with mandatory information. When the input is optional, this mark will be hidden and the optional prompt will appear.
With a tooltipTo explain the label, it is possible to add a Tooltip.
With an actionWhen 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
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.
Vertical groupingIn vertical groupings, the inputs must keep a distance between them of 24px.
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.
Behaviour
The dropdown will grow according to the content. When the dropdown is full screen a scroll will show up.
Do's and dont's
Do’s
Input text can show more than one line in label, placeholder or help text.
Don’t
It is not allowed to show a placeholder or text in two lines in the input.
Caution
Be carefull about using long labels in order to correctly display the requested information, as it can make the message difficult to understand.