Float labels streamline inputs by remove the need for placeholder text. Float labels can be used with most input types, including text, number, select, textarea, comboboxes (Selectize), and datepickers (Flatpickr). You can also use masking with float labels.

Do’s

• Do use margin classes to create empty space for the label to animate into
• Do match the CSS class for the size if your input on the float label parent

Don’ts

• Don’t use placeholder text with a float label

Note about select elements:

• select elements need hover detection via JS to move the label and work properly
• select elements won’t respect the readonly attribute (and float labels won’t work properly), so use the disabled instead

Use With Knockout

There is a Knockout extension for float labels. On your data-bind, call the extension: data-bind="floatLabel: true".