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

...

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

Interaction

Text Inputs

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

...

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

Code

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

...