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

...

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

...

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

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

...

Before	After
Image Added	Image Added

Default State

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

...

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

Interaction

Text Inputs

...

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

...