...
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.
...
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
...