Form Inputs

THIS MONTH

$58,356

LAST MONTH

$48,356

Default Input

To use add form-controlclass to the input

Input With Helper Text

Helper Text

Password

Disabled Input

Add attribute disabledto disable input field.

Predefined Input Value

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

Readonly Input Field

Add attribute readonlyto 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"

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

General Select

Select

Custom Select

To use add .custom-selectclass

Multiple Select

To use add multipleto the field

Select With Addons

To use add .input-group-prependclass to the div

Select With Buttons

To use add .input-group-appendclass to the div

File Upload

Default File Upload

To use add .form-control-fileclass to the input

Custom File Upload

To use add .custom-file-inputclass to the input
Upload

Custom File Upload with Button Left

To use add .input-group-prependclass to the div

Custom File Upload with Button Right

To use add .input-group-appendclass to the div

Different Style in Helper Text

Left Helper Text

To use add float-leftclass to the text
Helper Text

Center Helper Text

To use add text-centerclass to the text

Helper Text

Right Helper Text

To use add float-rightclass 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-validclass 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-horizontalclass 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

© 2020 Material Pro Admin by Reserved