Basic Inputs
Basic HTML form components with custom style.
Please provide a valid email address.
Looks good!
Password must be between 8 and 30 characters.
Your password must be between 8 and 30 characters.
Please select a valid option.
Hold shift or press ctrl for multi select.
Please enter at least 10 characters.
Looks good!
HTML Input Types
Here are the different input types you can use in HTML. Check more at W3Schools
Please enter at least 2 characters.
Please enter a number between 1 and 1000.
Please enter a valid phone number (10-15 digits with country code).
Please provide a valid email address.
Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
Try selecting more than one file when browsing for files.
a search field behaves like a regular text field
Sizing
Input sizing using .form-control-lg and .form-control-sm class.
.form-control-sm
.form-control
.form-control-lg

Input Attributes
Examples of autofocus, value, readonly, disabled, required attributes in Input .
autofocus on page load
Submit the form to see it in action
The input readonly attribute specifies that an input field is read-only
The value of a disabled input field will not be sent when submitting the form
Advance Input attributes
Examples of maxlength, min, max, step, pattern, list attributes of Input.
Submit form for checkout attribute functionality.
maxlength set to 4 characters
Enter a date before 1980-01-01
Enter a date after 2000-01-01
i.e.between 1 and 5
step set to 3
pattern attribute - three letter country code
The datalist tag is not supported in Safari 12.0 (or earlier).
Settings
  • Theme Mode

    Choose Market or dark mode or Auto

  • Sidebar Theme

    Choose Sidebar Theme

  • Accent color

    Choose your primary theme color

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout