Related Pages: << Links to related pages, if relevant >>

...

Inline inputs should be used where information often needs to be quickly updated, and it would be undesirable to change the user’s view.

...

When inline inputs are in use, changes are persisted every time an input is edited. There is no need for a global save and cancel.

...

Types 

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.	Image RemovedImage Added	Image RemovedImage Added

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

InputSelection Input

State	Inline Text		Inputs		Inline Selection Inputs
	Text Area	Text Field	Dropdown menu	Date Picker
Regular	Image Added			Image Added
Hover	Image Added	Image RemovedImage Added		Image Added
Active	Image Modified	Image Added		Image Added
Saving	Image Added	Image RemovedImage Added	Image RemovedImage Added	Image RemovedImage Added
Error	Image Modified	Image Added		Image Added
Warning	Image Modified	Image Added		Image Added
Focused	Image Added	Image RemovedImage Added		Image Added

Interaction

Text Inputs

...

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

...