form-input

Default Input

To use add Input in the form group

Input With Helper Text

To use add Formtext in the form group

Helper Text

Password

To use add type="password" in the form group

Disabled Input

Add attribute disabled to disable input field.

Predefined Input Value

Add attribute defaultValue="VALUE".

Readonly Input Field

Add attribute readonly to set field.

Input With Placeholder

Add attribute placeholder="..." to input area

Maximum Value

Add attribute maxLength="6" to input area

Minimum Value

Add attribute minLength="5" to input area

Input Type Options

Input Type Text

Using input type="text"

Input Type Password

Using input type="password"

Input Phone Number

Using input type="tel"

Input Type Email

Using input type="email"

Input Type URL

Using input type="url"

Input Type Search

Using input type="url"

Input Type Numbers

Using input type="number"

Input Type Date Time

Using input type="datetime-local"

Input Type Date

Using input type="date"

Input Type Time

Using input type="time"

Input Type Week

Using input type="week"

Input Type Month

Using input type="month"

Input Type Color

Using input type="color"

Input Type Range

Using input type="range"

General Textarea

Textarea

Textarea With Placeholder

Textarea With Helper Text

Helper Text

Inline Checkboxes & Radios

Inline Default Checkbox

Inline Default Radio Button

Inline Custom Checkbox

Inline Custom Radio Button

General Select

Select

Form Select

To use add .form-select class

Multiple Select

Select With Addons

Options

Select With Buttons

File Upload

Default File Upload

To use add type="file" to the input

Custom File Upload

To use add .custom-file-input class to the input

Custom File Upload with Button Left

Custom File Upload with Button Right

Different Style in Helper Text

Left Helper Text

To use add float-left class to the text

Helper Text

Center Helper Text

To use add text-center class to the text

Helper Text

Right Helper Text

To use add float-right class to the text

Helper Text

Inline Helper Text

Helper Text

Inline Helper Text With Color

Helper Text

Input With Validaton

Input With Success

Sweet! that name is available

Input With Danger

Oh noes! that name is already taken

Input With Success

Sweet! that name is available

Input With Danger

Oh noes! that name is already taken

Input Text Styles

Input Text Bold

Input Text Normal

Input Text Light

Input Text Italic

Input Text Lowercase

Input Text Uppercase

Input Sizing

Small Input

Normal Input

Large Input