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

...

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.

...

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.

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

  • Save and Cancel action buttons.

    Image Modified
  • A progress indicator, to show changes being saved.

    Image Modified

Inline selection inputs consist of:

...

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

...