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.

Change sizes using .floating-label-lg and .floating-label-sm.

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();

Text field boxes increase text field identifiability and scannability by using a transparent rectangular fill to enclose the label and input text.

Change sizes using .textfield-box-lg and .textfield-box-sm.

Text field boxes can be combined with floating labels.

Sizes can also be set by adding .floating-label-lg/sm classes.

Icons describe the type of input a text field requires. They are displayed to the left of the text field.

.input-group-icon can also work with floating label text fields and text field boxes: