Franklin Street - Inputs - Experiments

First Name

Last Name

Pros:

Streamlines the UI by removing visual clutter
Overall saves vertical space
Accessibility is retained (effect is achieved via CSS and JS)
Will work on any input type (text inputs, textareas, date pickers, comboboxes, select dropdowns)

Cons:

Inputs will need empty/reserved vertical space for the label's positioning when the input does have a value
Placeholder attribute can't be used (labels will need to be very clear)

Side by side with a basic label and input:

First Name

Last Name

First Name

Last Name

Other input types:

Input Text

Textarea

Select

With Material Design styling:

Input Text

Textarea

Select

With secondary action buttons:

Input States

Disabled

Disabled Text

Disabled Textarea

Disabled Select

Disabled With Values

Disabled Text

Disabled Textarea

Disabled Select

Readonly With Values

Disabled Text

Disabled Textarea

Some text

Disabled Select

Validation

Validation Text *

Text required.

Validation Textarea *

Text required.

Validation Select *

Text required.

Dollars

Percent

Dollars (Whole Dollar)

Percent (Whole Number)

Sq Ft

Months

Years

With Material Design styling:

Dollars

Percent