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 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
<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="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
<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
<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
<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>