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

...

Inline inputs are components that switch between reading and editing modes on the same page.

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

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

...

Types 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 Area
		Text Field
Inline Selection Inputs	Inline selection inputs are variants of standard selection components, such as a Drop-down Menu, Date Picker, or Time Picker.	Dropdown Menu	Image RemovedImage Added
		Date Picker	Image RemovedImage Added

Usage & Behavior

...

• A label, containing either the current content or informative placeholder text. For example:

  

• An input field, corresponding to the standard Text Area or Text Field component.

• Save and cancel actions. For example:Cancel action buttons.

  

• A progress indicator, to show changes being saved. For example:

  

Inline selection inputs consist of:

• A text label, containing either the current content or informative placeholder text. For example:

  

• A trigger icon, to indicate that the field is interactive. For example:

  

• An input field, corresponding to the standard component, such as the Date Picker or Drop-down Menu.

• A progress indicator, to show changes being saved. For example:

  

Placement and Positioning

Inline text areas should push content that is below down when activeAny 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:

...

Inline text fields and selection inputs should overlay any content below when active. For example:

...

Default State

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

...

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

Interaction

Text Inputs

• When the input field is active, Save and Cancel actions options will be revealedshown.

• When save Save is selected:

  • a spinning progress indicator is shown,

  • the changes are applied, and

  • the input returns to the regular state.

• When cancel 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.

...

All other interactions should follow the standard component 's behavior.

Validations and errors

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Enter = performs the save action.

...

Keyboard	Regular state	Active state
Enter	Enters editing mode	Saves
Esc	N/A	Cancels

See the individual component pages for more information.

...

Zeplin link	Screen thumbnail
Inline Text Field - https://zpl.io/Q0L0nKn	Image RemovedImage Added
Inline Text Area - https://zpl.io/O0M0nEl	Image RemovedImage Added
Inline Date Picker - https://zpl.io/L484no6	Image RemovedImage Added
Inline Dropdown Menu - https://zpl.io/9qgqzXw	Image RemovedImage Added

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

...