components
Input Counter
v.1.0.0 | Saturn
StorybookField that allows counting the characters entered by the user, having a maximum limit.
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 | Element that allows to know the proximity to reach the limit of characters established for that input. The maximum number of characters will depend on the need of the flow, it should be customizable by property. |
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 infoThis is the input when is filled and contains information. In some cases, when the user enters data in the input, a (non-clickable) block with related information is displayed below, such as the name of the bank related to the account number.
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.
Options
Mandatory informationIn this case the input is not active but contains information that the user has filled in previously or at another time.
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
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
Input text should 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.