components
Input Currency
v.1.0.0 | Saturn
StorybookField that allows the user enter currencies 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 | The error icon is used to alert the user about an error. |
5 Required | Classic help text to give some more idea or condition about what is requested. It align to the left side. |
6 Required | Text layer for the appropriate currency abbreviation or symbol. |
7 | 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 |
8 | This text is displayed to the right of the label when the input is not mandatory to filled. |
9 | It is possible to have an action link if the content is too large for a tooltip . |
States
Default emptyA default state communicates an interactive component or element.
Default filled / Filled with related infoThe 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 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.
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
Truncated textThe placeholder text must be truncated in case it cannot be completely displayed.
Label with tooltip or actionAs 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 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.
Do's and dont's
Do’s
Use prefix or sufix one at a time.
Don’t
Do not use both prefix and sufix at the same time.