2
2

Form Inputs

  1. Home
  3. Form Inputs
Default Input

Basic example of 'input' element.

Input With Helper Text

We'll never share your details.

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.

Pilled input

Use the `.rounded-full` utility class to make inputs circular.

Floating label
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".

Preline Colorpicker

Set the input type="color" to the '<input>'

Input Type Range

Using input type="range".

General Textarea
Textarea
Textarea With Placeholder
Textarea With Helper Text

We'll get back to you soon.

Inline Checkboxes & Radios
Inline Default Checkbox
Textarea With Placeholder
Inline Custom Checkbox
Inline Custom Radios
General Select
Select
Label

Basic input example with label.

Pilled select

Use the '.rounded-full' utility class to make select circular.

Floating label
Disabled
File Upload
Default File Upload

Basic file input example.

Disabled File Upload

To use add 'disabled' attr to the input

Sizes

File inputs stacked small to large sizes.

File input buttons

Button style file input example.

Different Style in Helper Text
Left Helper Text

To use add 'justify-start' class to the text.

Helper text

Center Helper Text

To use add 'justify-center' class to the text.

Helper text

Right Helper Text

To use add 'justify-end' class to the text.

Helper text

Inline Helper Text

Basic input example with inline helper text.

Helper Text

Inline Helper Text With Color

Input example with inline helper text with color.

Helper Text

Input With Validaton
Input With Success

Looks good!

Input With Success

Please enter a valid email address.

Select With Success

Looks good!

Select With Error

Please select a valid state.

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