This repository has been archived by the owner on Aug 12, 2021. It is now read-only.
Form Inputs
Group: Forms
The Form Inputs are for the user to enter information. They can display validation status. Also they have commons elements.
Types and variants #733
| Type | Use | Example |
|---|---|---|
| Standard | Text entry | names, identifiers |
| Number | Numeric information | prices, amounts |
| Password | Information not visible | passwords, tokens |
| Units | Information with scalar units | prices with currencies |
| Icon | Display icons to help the user understand what information to enter, or perform action on the content of the input | search boxes, clear input action |
| Limited | Information is limited to N amount of characters with an indicator of how many characters are left. | descriptions, limited identifiers |
| Action | Display also a button with label or icon that performs an action with the content of the input | add items to a list, copy content to the clipboard. |
| Textarea | Long text entry | descriptions, copy text |
Common UX Elements #735
| Element | Description |
|---|---|
| Label | The label related to the immediate from input. |
| Input | The main element where the interaction happens. |
| Icon | Display icons inside the input element. Can be left or right aligned. |
| Icon + Action | The icon can perform an action; I can be differentiated from the icon without action by a different color, with more contrast. It will always be displayed to the right. |
| Unit | Will display information about the units (scalar) belonging to the input. displayed to the left or to the right. |
| Action Button | Can perform an action. |
| Counter | Displays the remaining characters left on the input. |
| Spin Box | Displays up/increase and down/decrease buttons that modify the numeric value accordingly. |
Visuals #737
Form Inputs Status #763
| Status | Usage | Description |
|---|---|---|
| Normal | The default status | can have a place holder that will be displayed in lighter color than the usual text |
| Focused | Activated when the user move the focus to that input | highlight with a contrasting visual effect; a different coloured border |
| Invalid | Display when the entered information is not correct, empty or is invalid | highlight in an negative color; red for example |
| Valid | Not always used. Display when the entered information is valid | highlight with an positive color; green for exmaple |
| Disabled | The value of the input cannot be entered or modified | is displayed to be different Normal status |
| Mandatory | The field have validation and the status can be mutated to Invalid or Valid | The usual way to signal the user a field is mandatory, per convention, is to display an * along with the label. Also the Mandatory input fields can have more contrast than the Normal input fields |
| Read only | Only display information in the context of the form. | autogenerated fields |
| Warning | When the entered data is not correct but that doesn't prevent the tasks for been completed. | highlight in an warning color; orange for example and display the error messages |
Help elements #738
| Name | Description |
|---|---|
| Help Icon | Displayed above the input element, positioned to the top, right. When hovered it will display a tooltip will display a popup with related information. On Mobile the tooltip can be triggered by taping the icon |
| Help Text | Always visible, located bellow the input element |
Global Show Help behavior: When the Show Help global toggle is activated, the Text displayed inside the tooltip becomes a Help Text and the Help Icon disappears.