Forms
Default Inputs
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Basic Input</label>
<input type="text" name="#0" class="form-control">
</div>
<div class="col-12">
<label class="form-label">Input with Placeholder</label>
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input with Phone </label>
<input type="text" class="form-control flex-grow-1" placeholder="+1 (555) 253-08515">
</div>
<div class="col-12">
<label class="form-label">Input Date</label>
<input type="date" name="#0" class="form-control" placeholder="mm/dd/yyyy">
</div>
<div class="col-12">
<label class="form-label">Input with Payment</label>
<div class="input-group">
<span class="input-group-text bg-base">
<img src="assets/images/card/payment-icon.png" alt="image">
</span>
<input type="text" class="form-control flex-grow-1" placeholder="Card number">
</div>
</div>
</div>
Input Group
http://
This is a hint text to help user.
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<span class="input-group-text bg-base">
<iconify-icon icon="mynaui:envelope"></iconify-icon>
</span>
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<select class="form-select input-group-text w-90-px flex-grow-0">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
<select class="form-select input-group-text w-90-px flex-grow-0">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<span class="input-group-text bg-base"> http:// </span>
<input type="text" class="form-control" placeholder="www.random.com">
</div>
</div>
<div class="col-12">
<label class="form-label">Input</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="www.random.com">
<button type="button" class="input-group-text bg-base"><iconify-icon icon="lucide:copy"></iconify-icon> Copy</button>
</div>
<p class="text-sm mt-1 mb-0">This is a hint text to help user.</p>
</div>
</div>
Input Sizing
<div class="row gy-3">
<div class="col-12">
<label class="form-label">Input Large</label>
<input type="text" name="#0" class="form-control form-control-lg" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input Medium</label>
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
</div>
<div class="col-12">
<label class="form-label">Input Small</label>
<input type="text" name="#0" class="form-control form-control-sm" placeholder="info@gmail.com">
</div>
</div>
Input Form With Icons
<div class="row gy-3">
<div class="col-12">
<label class="form-label">First Name</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter First Name">
</div>
</div>
<div class="col-12">
<label class="form-label">Last Name</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
</div>
</div>
<div class="col-12">
<label class="form-label">Email</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input type="email" name="#0" class="form-control" placeholder="Enter Email">
</div>
</div>
<div class="col-12">
<label class="form-label">Phone</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
</div>
</div>
<div class="col-12">
<label class="form-label">Password</label>
<div class="icon-field">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary-600">Submit</button>
</div>
</div>
Horizontal Input Form
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" name="#0" class="form-control" placeholder="Enter First Name">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" name="#0" class="form-control" placeholder="Enter Email">
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Phone</label>
<div class="col-sm-10">
<div class="form-mobile-field">
<select class="form-select">
<option>US</option>
<option>US</option>
<option>US</option>
<option>US</option>
</select>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
</div>
</div>
</div>
<div class="row mb-24 gy-3 align-items-center">
<label class="form-label mb-0 col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" name="#0" class="form-control" placeholder="*******">
</div>
</div>
<button type="submit" class="btn btn-primary-600">Submit</button>
Example
<form class="row gy-3 needs-validation" novalidate>
<div class="col-md-6">
<label class="form-label">First Name</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter First Name" required>
<div class="invalid-feedback">
Please provide first name
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Last Name</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="Enter Last Name" required>
<div class="invalid-feedback">
Please provide last name
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input type="email" name="#0" class="form-control" placeholder="Enter Email" required>
<div class="invalid-feedback">
Please provide email address
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:phone-calling-linear"></iconify-icon>
</span>
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000" required>
<div class="invalid-feedback">
Please provide phone number
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Password</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******" required>
<div class="invalid-feedback">
Please provide password
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Confirm Password</label>
<div class="icon-field has-validation">
<span class="icon">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input type="password" name="#0" class="form-control" placeholder="*******" required>
<div class="invalid-feedback">
Please confirm password
</div>
</div>
</div>
<div class="col-md-12">
<button class="btn btn-primary-600" type="submit">Submit form</button>
</div>
</form>
JavaScript
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})