Top

Popular Search:

- Starter kit
- Element
- components
- forms
- tables

#### Forms

#### Validation form Preview link

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

    <form class="needs-validation" novalidate="">
      <div class="row g-3">
       <div class="col-md-4">
        <label class="form-label" for="validationCustom01">First name</label>
        <input class="form-control" id="validationCustom01" type="text" value="Mark" required="" data-bs-original-title="" title="">
        <div class="valid-feedback">Looks good!</div>
       </div>
       <div class="col-md-4">
        <label class="form-label" for="validationCustom02">Last name</label>
        <input class="form-control" id="validationCustom02" type="text" value="Otto" required="" data-bs-original-title="" title="">
        <div class="valid-feedback">Looks good!</div>
       </div>
      <div class="col-md-4 mb-3">
       <label class="form-label" for="validationCustomUsername">Username</label>
       <div class="input-group">
        <span class="input-group-text" id="inputGroupPrepend">@</span>
        <input class="form-control" id="validationCustomUsername" type="text" placeholder="Username" aria-describedby="inputGroupPrepend" required="" data-bs-original-title="" title="">
        <div class="invalid-feedback">Please choose a username.</div>
       </div>
      </div>
    </div>
    <div class="row g-3">
      <div class="col-md-6">
       <label class="form-label" for="validationCustom03">City</label>
       <input class="form-control" id="validationCustom03" type="text" placeholder="City" required="" data-bs-original-title="" title="">
       <div class="invalid-feedback">Please provide a valid city.</div>
      </div>
      <div class="col-md-3">
       <label class="form-label" for="validationCustom04">State</label>
       <select class="form-select" id="validationCustom04" required="">
        <option selected="" disabled="" value="">Choose...</option>
        <option>...</option>
       </select>
       <div class="invalid-feedback">Please select a valid state.</div>
      </div>
      <div class="col-md-3 mb-3">
       <label class="form-label" for="validationCustom05">Zip</label>
       <input class="form-control" id="validationCustom05" type="text" placeholder="Zip" required="" data-bs-original-title="" title="">
       <div class="invalid-feedback">Please provide a valid zip.</div>
      </div>
     </div>
     <div class="mb-3">
      <div class="form-check">
       <div class="checkbox p-0">
        <input class="form-check-input" id="invalidCheck" type="checkbox" required="" data-bs-original-title="" title="">
        <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
       </div>
       <div class="invalid-feedback">You must agree before submitting.</div>
      </div>
     </div>
     <button class="btn btn-primary" type="submit" data-bs-original-title="" title="">Submit form</button>
    </form>

##### To use validation you have to add the following script tag

    <!-- Validation JS -->
    <script src="../assets/js/form-validation-custom.js" ></script>

#### Base input Preview link

Email address

    <form class="form theme-form">
     <div class="card-body p-0">
      <div class="row">
       <div class="col">
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlInput1">Email address</label>
          <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com" data-bs-original-title="" title="">
        </div>
       </div>
      </div>
     </div>
    </form>

#### Checkbox & Radio Preview link

Option 1
Disabled
Checked
Default
Disabled
Checked

    <div class="row">
     <div class="custom-radio-ml col-lg-3 col-md-6">
      <div class="form-check radio radio-primary">
       <input class="form-check-input" id="radio1" type="radio" name="radio1" value="option1" data-bs-original-title="" title="">
       <label class="form-check-label" for="radio1">Option<span class="digits"> 1</span></label>
      </div>
      <div class="form-check radio radio-primary">
       <input class="form-check-input" id="radio3" type="radio" name="radio1" value="option1" disabled="" data-bs-original-title="" title="">
       <label class="form-check-label" for="radio3">Disabled</label>
      </div>
      <div class="form-check radio radio-primary">
       <input class="form-check-input" id="radio4" type="radio" name="radio1" value="option1" checked="" data-bs-original-title="" title="">
       <label class="form-check-label" for="radio4">Checked</label>
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
     <div class="form-check checkbox mb-0">
      <input class="form-check-input" id="checkbox1" type="checkbox" data-bs-original-title="" title="">
      <label class="form-check-label my-0" for="checkbox1">Default</label>
     </div>
     <div class="form-check checkbox mb-0">
      <input class="form-check-input" id="checkbox2" type="checkbox" disabled="" data-bs-original-title="" title="">
      <label class="form-check-label my-0" for="checkbox2">Disabled</label>
     </div>
     <div class="form-check checkbox mb-0">
      <input class="form-check-input" id="checkbox3" type="checkbox" checked="" data-bs-original-title="" title="">
      <label class="form-check-label my-0" for="checkbox3">Checked</label>
     </div>
    </div>
    </div>

#### Input group Preview link

Left Addon
@

    <form>
    <div class="mb-3 m-form__group">
     <div class="form-label">Left Addon</div>
      <div class="input-group">
       <span class="input-group-text">@</span>
       <input class="form-control" type="text" placeholder="Email" data-bs-original-title="" title="">
      </div>
     </div>
    </form>

#### Datepicker Offical link Preview link

Default

    <div class="date-picker">
    <form class="theme-form">
     <div class="mb-3 row g-3">
      <label class="col-sm-3 col-form-label text-sm-end">Default</label>
      <div class="col-xl-5 col-sm-9">
       <div class="input-group">
        <input class="datepicker-here form-control digits" type="text" data-language="en" data-bs-original-title="" title="" />
       </div>
      </div>
     </div>
    </form>
    </div>

##### To use datepicker you have to add the following script tag

    <!-- Datepicker JS -->
    <script src="../assets/js/datepicker/date-picker/datepicker.js"></script>
    <script src="../assets/js/datepicker/date-picker/datepicker.en.js"></script>
    <script src="../assets/js/datepicker/date-picker/datepicker.custom.js"></script>

##### You have to add the following style css file for the datepicker design

    <!-- Datepicker CSS -->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/date-picker.css">

#### Switch Preview link

    <label class="switch">
     <input type="checkbox" checked="" data-bs-original-title="" title="">
     <span class="switch-state"></span>
    </label>
    <label class="switch">
     <input type="checkbox" data-bs-original-title="" title="">
     <span class="switch-state"></span>
    </label>

#### Touchspin Offical link Preview link

    <fieldset>
    <div class="input-group">
      <input class="touchspin" type="text" value="40">
    </div>
    </fieldset>

##### To use touchspin you have to add the following script files

    <!-- Touchspin JS -->
    <script src="../assets/js/touchspin/vendors.min.js"></script>
    <script src="../assets/js/touchspin/touchspin.js"></script>
    <script src="../assets/js/touchspin/input-groups.min.js"></script>

#### Select2 Offical link Preview link

Default Placeholder

    <div class="col-form-label">Default Placeholder</div>
      <select class="js-example-placeholder-multiple col-sm-12" multiple="multiple">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Coming</option>
        <option value="WY">Hanry Die</option>
        <option value="WY">John Doe</option>
      </select>

##### To use select2 you have to add the following script files

    <!-- Touchspin JS -->
    <script src="../assets/js/select2/select2.full.min.js"></script>
    <script src="../assets/js/select2/select2-custom.js"></script>

##### You have to add the following style css file for the select2 design

    <!-- Select 2 CSS -->
    <link rel="stylesheet" type="text/css" href="../assets/css/vendors/select2.css">

#### Typeahead Offical link Preview link

    <div id="the-basics">
    <form class="theme-form">
      <div>
        <input class="typeahead form-control" type="text" placeholder="States of USA" />
      </div>
    </form>
    </div>

##### To use typeahead you have to add the following script files

    <!-- Typeahead JS -->
    <script src="../assets/js/typeahead/handlebars.js"></script>
    <script src="../assets/js/typeahead/typeahead.bundle.js"></script>
    <script src="../assets/js/typeahead/typeahead.custom.js"></script>

#### Form wizard Preview link

First Name
Last Name
Contact No.
Email address
Password
Confirm Password
Birthday:
Age
Have Passport
Country
State
City

    <form class="form-wizard" id="regForm" action="#" method="POST">
    <div class="tab">
      <div class="mb-3">
        <label for="name">First Name</label>
        <input class="form-control" id="name" type="text" placeholder="Johan" required="required">
      </div>
      <div class="mb-3">
        <label for="lname">Last Name</label>
        <input class="form-control" id="lname" type="text" placeholder="Deo">
      </div>
      <div class="mb-3">
        <label for="contact">Contact No.</label>
        <input class="form-control" id="contact" type="number" placeholder="123456789">
      </div>
    </div>
    <div class="tab">
      <div class="mb-3 m-t-15">
        <label for="exampleFormControlInput1">Email address</label>
        <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com">
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1">Password</label>
        <input class="form-control" id="exampleInputPassword1" type="password" placeholder="Password">
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1">Confirm Password</label>
        <input class="form-control" id="exampleInputcPassword1" type="password" placeholder="Enter again">
      </div>
    </div>
    <div class="tab">
      <div class="mb-3">
        <label for="exampleFormControlInput1">Birthday:</label>
        <input class="form-control" type="date">
      </div>
      <div class="mb-3">
        <label class="control-label">Age</label>
        <input class="form-control" placeholder="Age" type="text">
      </div>
      <div class="mb-3">
        <label class="control-label">Have Passport</label>
        <input class="form-control" placeholder="Yes/No" type="text">
      </div>
    </div>
    <div class="tab">
      <div class="mb-3">
        <label class="control-label">Country</label>
        <input class="form-control mt-1" type="text" placeholder="Country" required="required">
      </div>
      <div class="mb-3">
        <label class="control-label">State</label>
        <input class="form-control mt-1" type="text" placeholder="State" required="required">
      </div>
      <div class="mb-3">
        <label class="control-label">City</label>
        <input class="form-control mt-1" type="text" placeholder="City" required="required">
      </div>
    </div>
    <div>
      <div class="text-end btn-mb">
        <button class="btn btn-secondary" id="prevBtn" type="button" onclick="nextPrev(-1)">Previous</button>
        <button class="btn btn-primary" id="nextBtn" type="button" onclick="nextPrev(1)">Next</button>
      </div>
    </div>
    <!-- Circles which indicates the steps of the form:-->
    <div class="text-center"><span class="step"></span><span class="step"></span><span class="step"></span><span class="step"></span></div>
    <!-- Circles which indicates the steps of the form:-->
    <!-- Container-fluid Ends-->
    </form>

##### To use form wizard you have to add the following script files

    <!-- form wizard JS -->
    <script src="../assets/js/form-wizard/form-wizard.js"></script>