Related Pages: << Links to related pages, if relevant >>
| Table of Contents | ||||
|---|---|---|---|---|
|
...
Type | Usage | Regular (reading mode) | Active (editing mode) |
|---|---|---|---|
Inline text inputs | Inline text inputs are variants of the standard Text Field and Text Area components. |  |  |
Inline selection Inputs | Inline selection inputs are variants of standard selection components, such as a Drop-down Menu, Date Picker, or Time Picker. |   |   |
Usage & Behavior
...
Placement and Positioning
Inline text areas should push content that is below down when active. For example:
...
Inline text fields and selection inputs should overlay content below when active. For example:
...
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 | Dropdown menu | Date Picker | |
Regular | |  |  |  |
Hover |  |  |  |  |
Active | |  |  |  |
Saving | ||||
 |  |
 |  | |||
Error |  |  |  |  |
Warning |  |  |  |  |
Focused |
 |  |  |  |
Interaction
Text Inputs
When the input field is active, Save and Cancel actions will be revealed.
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.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Enter = performs the save action.
Esc = performs the cancel action.
See the individual component pages for more information.
...
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
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...