Default Input

To use add form-control class to the input

Input With 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 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"

Textarea

Textarea With Placeholder

Textarea With Helper Text

Select

Custom Select

To use add .form-select class

Multiple Select

To use add multiple to the field

Left Helper Text

To use add float-start class to the text

Center Helper Text

To use add text-center class to the text

Right Helper Text

To use add float-end class to the text

Tooltip Bottom

Tooltip Right

Tooltip Top

Tooltip Left

Input Text Bold

Input Text Normal

Input Text Light

Input Text Italic

Input Text Lowercase

Input Text Uppercase

Input Text Capitalize

Small Input

Normal Input

Large Input