loader

Form Inputs

Default Input

To use add form-control class to the input

Input With Helper Text
Helper Text
Password
Disabled Input

Add attribute disabled to disable input field.

Predefined Input Value

Add attribute value="VALUE" to set predefined value.

Readonly Input Field

Add attribute readonly to set field readonly.

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="search"

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"

Bootstrap Colorpicker

Use form-control-color classs for bootstrap colorpicker

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 Radios
General Select
Select
Form Select

To use add .form-select class

Multiple Select

To use add multiple to the field

Select With Addons

To use add .input-group-prepend class to the div

Select With Buttons

To use add .input-group-append class to the div

File Upload
Default File Upload

To use add .form-control-file class to the input

Disabled File Upload

To use add disabled attr to the input

Small File Upload

To use add .form-control-sm class to the div

Large File Upload

To use add .form-control-lg class to the div

Different Style in Helper Text
Left Helper Text

To use add justify-content-start 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 justify-content-end class to the text

Helper Text
Inline Helper Text
Helper Text
Inline Helper Text With Color
Helper Text
Input With Validaton
Input With Success

To use add is-valid class to the input

Success! You've done it.
Input With Danger

To use add is-invalid class to the input

Sorry, that username's taken. Try another?
Inline Input With Success

To use add form-horizontal class to the input

Success! You've done it.
Inline Input With Danger

To use add form-horizontal class to the input

Sorry, that username's taken. Try another?
Input With Tooltip
Tooltip Bottom
Tooltip Right
Tooltip Top
Tooltip Left
Input Text Styles
Input Text Bold
Input Text Normal
Input Text Light
Input Text Italic
Input Text Lowercase
Input Text Uppercase
Input Text Capitalize
Input Sizing
Small Input
Normal Input
Large Input

Settings

Theme
Theme Direction
Theme Colors
Layout Type
Container Option
Sidebar Type
Card With