Forms
Validation form Preview link
<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-checked form-check-inline">
<input class="form-check-input" id="flexCheckDefault" type="checkbox" value>
<label class="form-check-label" for="flexCheckDefault">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
<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
<div class="row">
<div class="col-lg-3 col-md-6 checkbox-checked">
<div class="form-check-size">
<div class="form-check form-check-inline">
<input class="form-check-input me-2" id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1">
<label class="form-check-label" for="inlineRadio1"> Option1 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input me-2" id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2" checked="">
<label class="form-check-label" for="inlineRadio2"> Checked </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input me-2" id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3" disabled="">
<label class="form-check-label" for="inlineRadio3"> Disabled </label>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 checkbox-checked">
<div class="form-check-size">
<div class="form-check form-check-inline">
<input class="form-check-input me-2" id="inlineCheckbox1" type="checkbox" value="option1" checked="">
<label class="form-check-label" for="inlineCheckbox1"> Checked </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input me-2" id="inlineCheckbox2" type="checkbox" value="option2">
<label class="form-check-label" for="inlineCheckbox2"> Default </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input me-2" id="inlineCheckbox3" type="checkbox" value="option3" disabled="">
<label class="form-check-label" for="inlineCheckbox3"> Disabled </label>
</div>
</div>
</div>
</div>
Input group Preview link
<form class="theme-form row g-3">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@
</span>
<input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"> </div>
</form>
Datepicker Offical link Preview link
<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 Preview link
<div class="touchspin-wrapper">
<button class="decrement-touchspin btn-touchspin touchspin-primary"><i class="fa fa-minus"> </i></button>
<input class="input-touchspin spin-outline-primary" type="number" value="8">
<button class="increment-touchspin btn-touchspin touchspin-primary"><i class="fa fa-plus"> </i></button>
</div>
To use touchspin you have to add the following script files
<!-- Touchspin JS -->
<script src="../assets/js/document/touchspin/touchspin.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>
<select class="form-control" id="cities" name="cities" >
<option value="" >Choose a city</option>
<option value="Leeds" >Leeds</option>
<option value="Manchester" >Manchester</option>
<option value="London" >London</option>
<option value="Sheffield" >Sheffield</option>
<option value="Newcastle" >Newcastle</option>
</select>
</div>
</form>
</div>
To use typeahead you have to add the following script files
<!-- Typeahead css -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/choices.js/public/assets/styles/choices.min.css">
<!-- Typeahead JS -->
<script src="../assets/js/vendors/choices.js/public/assets/scripts/choices.js"></script>
<script src="../assets/js/choices.js/typehead-custom.js"></script>
Form wizard Preview link
<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>