Text fields usually appear in forms. Users may enter text, numbers, or mixed-format types of input.
Most of the details about a basic tab have been covered in Forms / Forms Layouts / Basic Forms documentation. Please refer to this page for more details.
When the user engages with the text input field, the floating inline labels move to float above the field.
N.B. Implementation of floating label text fields requires material.js
or material.min.js.
Floating label also requires the pairing label
and .form-control
placed in the same .floating-label
as its first two children.
.floating-label
.
.floating-label
.
It is recommended to run the following JavaScript code after the document is ready or a floating label text field is added dynamically to a page, so the floating label will get the correct initial state based on whether a particular floating label text field has value or not.
$('.floating-label .custom-select, .floating-label .form-control').floatinglabel();