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

Table of Contents

minLevel	1
maxLevel	3

...

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	Input	Regular (

reading mode

Reading Mode)	Active (

editing mode

Editing Mode)
Inline

text inputs

Text Inputs	Inline text inputs are variants of the standard Text Field and Text Area components.	Text Area	Image Modified	Image Modified
		Text Field	Image Added	Image Added
Inline

selection

Selection Inputs

Inline selection inputs are variants of standard selection components, such as a Drop-down Menu, Date Picker, or Time Picker.

Image Removed

	Dropdown Menu	Image Added	Image Added
	Date Picker	Image Added	Image Added

Usage & Behavior

...

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:

...

Inline inputs may include assistive placeholder text by default. For example:

...

Otherwise, any previously-entered content will be displayed. For example:

...

Image Removed

Image Added

Image Modified

Image Removed

Image Removed

Image Added

Image Modified

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.