...
Where inline inputs are used, changes are persisted every time an input is edited. There is no need for a global Save and Cancel.
...
Types
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
Structure
...
Any content below an inline text area should be pushed down the page when the field is active, so that all content is still visible. For example:
Before | After |
|---|---|
 |  |
Inline selection inputs should overlay any content below when active. For example:
Before | After |
|---|---|
 |  |
Default State
Inline inputs may include assistive placeholder text by default. For example:
...
Otherwise, any previously-entered content will be displayed. For example:
...
States
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 |
 |
 |
 |
 |
Interaction
Text Inputs
When the input field is active, Save and Cancel options will be shown.
When Save is selected:
a spinning progress indicator is shown,
the changes are applied, and
the input returns to the regular state.
When Cancel is selected:
unapplied changes are discarded, and
the input returns to the regular state.
Clicking outside of the text input field:
returns it to the regular state, and
applies any changes.
...
Validations and errors
Please refer to the Field Validation page for more information.
...
See the individual component pages for more information.
Keyboard | Regular (Reading Mode) | Active (Editing Mode) |
|---|---|---|
Tab | Navigates to the next component | Navigates to the next action, including Cancel and Save |
Shift + Tab | Navigates to the previous component | Navigates to the previous action |
Enter | Enters editing mode | Saves, and returns input to reading mode |
Esc | N/A | Cancels, and returns input to reading mode |
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
...