Description

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

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

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
Inline Text Inputs	Inline text inputs are variants of the standard Text Field and Text Area components.	Text Field
Inline Text Inputs		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
Inline Selection Inputs		Date Picker

Inline text inputs consist of:

A label, containing either the current content or informative placeholder text.
An input field, corresponding to the standard Text Area or Text Field component.
Save and Cancel action buttons.
A progress indicator, to show changes being saved.

Inline selection inputs consist of:

A text label, containing either the current content or informative placeholder text.
A trigger icon, to indicate that the field is interactive.
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.

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

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

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

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.

All other interactions should follow the standard Text Area or Text Field components.

When a selection is made:
- a spinning progress indicator is shown in place of the trigger icon,
- the selection is applied, and
- the input returns to the regular state.
Clicking outside of an active input closes it.

All other interactions should follow the standard component behavior.

Please refer to the Field Validation page for more information.

Please refer to the Progress Indicator page for more information.

Use:

on screens where information needs to be updated frequently.
for forms which have previously been completed, and only some fields subsequently need to be edited.
where it would be undesirable to change the user’s view.

Don’t use:

for critical tasks or blank forms on first creation → use the standard component version instead.
where there’s lots of non-interactive guiding text on the same page.

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

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

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