Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Table of Contents
minLevel1
maxLevel3

...

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

...

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.

Image RemovedImage Added

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

State

Text Input

Selection Input

Regular

Image ModifiedImage Modified

Hover

Image ModifiedImage Modified

Active

Image ModifiedImage Modified

Saving

Image ModifiedImage ModifiedImage Added

Error

Image ModifiedImage Modified

Warning

Image ModifiedImage Modified

Focused

Image ModifiedImage Modified

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

Image Added

Inline Text Area - https://zpl.io/O0M0nEl

Image Added

Inline Date Picker - https://zpl.io/L484no6

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

...