eRelated Related Pages: << Links to related pages, if relevant >>
| Table of Contents | ||||
|---|---|---|---|---|
|
...
Type | Usage | Input | Regular (Reading Mode) | Active (Editing Mode) |
|---|---|---|---|---|
Inline Text Inputs | Inline text inputs are variants of the standard Text Field and Text Area components. | Text Field |  |   |
Text Area |  |   | ||
Inline Selection Inputs | Inline selection inputs are variants of standard selection components, such as a Drop-down Menu, Date Picker, or Time Picker. | Drop-down Menu |  |   |
Date Picker |  |   |
Usage & Behavior
...
State | Inline Text Inputs | Inline Selection Inputs | ||
|---|---|---|---|---|
Text Area | Text Field | Drop-down menu | Date Picker | |
Regular (Reading Mode) |  |  |  | |
Hover |  |  |  |  |
Active (Editing Mode) |  |  |   |  |
Saving |   |   |  |   |
Read Only |  |  |  |  |
Error |  |  |  |  |
Warning |  |  |  |  |
Focused |  |  |  |  |
...
See the individual component pages for more information.
Keyboard | Regular state | Active state | |
|---|---|---|---|
Enter | Enters editing mode | Saves | |
Esc | N/A | Cancels(Reading Mode) | Active (Editing Mode) |
Tab | Navigates to the next component | Navigates to the next action | |
Shift + Tab | Navigates to the previous component | Navigates to the previous action | |
Enter | Enters editing mode | Saves | |
Esc | N/A | Cancels |
Design
Zeplin link | Screen thumbnail |
|---|---|
Inline Text Field - https://zpl.io/Q0L0nKn |   |
Inline Text Area - https://zpl.io/O0M0nEl |  |
Inline Date Picker - https://zpl.io/L484no6 |  |
Inline Dropdown Menu - https://zpl.io/9qgqzXw |  |
Code
...
...