Basic Text Fields

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.

Floating Label Text Fields

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.

Help text placed inside .floating-label.
Help text placed outside .floating-label.

Floating Label Text Fields Sizes

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

Help text placed inside .floating-label.
Help text placed outside .floating-label.

Floating Label Text Fields Usage

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

Floating Label Text Fields Boxes

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

Help text placed inside .textfield-box.
Help text placed outside .textfield-box.

Floating Label Text Fields Boxes Size

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

Help text placed inside .textfield-box.
Help text placed outside .textfield-box.

With Floating Labels

Text field boxes can be combined with floating labels.

Floating Label Boxes with Different Sizes

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

Help text placed inside .floating-label.
Help text placed outside .floating-label.

Basic Text Fields With Icons

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

event
event
event
event
event

Floating Label Text Fields with Icons

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

Help text placed inside .textfield-box.
event
event
event

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now