Set Theme Color
Icon Border Stroke
Layout Section Light/Dark
More App Settings

widgets-Forms

Personal Information
<form>
											<div class="row">
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">First Name</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="text" class="form-control">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
																<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Last Name</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="text" class="form-control">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
																<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Email Address</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="email" class="form-control">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
																<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Phone Number</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="text" class="form-control phone-number" placeholder="Ex: (000) 000-00-00">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
																<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
																<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Password</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="password" class="form-control">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
																<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
																<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Confirm Password</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="password" class="form-control">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
																<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
																<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="col-12">
													<button class="btn btn-primary">Save</button>
													<button class="btn btn-outline-secondary">Cancel</button>
												</div>
											</div>
										</form>
Company Information
<form>
											<div class="row">
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Company Name</label>
													<fieldset class="form-icon-group left-icon position-relative"> 
														<input type="text" class="form-control">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-building" viewBox="0 0 16 16">
																<path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694 1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"/>
																<path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Company Number</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="text" class="form-control phone-number" placeholder="Ex: (000) 000-00-00">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
																<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
																<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Employees</label>
													<input type="hidden" class="form-control">
													<fieldset>
														<select class="array-select form-control form-select" aria-label="example">
															<option selected>Select Employees</option>
															<option>0-10</option>
															<option>11-50</option>
															<option>51-100</option>
															<option>100+</option>
														</select>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Company Type</label>
													<select class="form-select array-select form-control" aria-label="example">
														<option selected>Select Type</option>
														<option>Real Estate</option>
														<option>Hospital</option>
														<option>Information Technology (IT)</option>
														<option>Goverment</option>
													</select>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">Joining Date</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="text" class="form-control f-basic flatpickr-input" placeholder="Select Date.." readonly="readonly">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
																<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
																<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="mb-3 col-md-6 col-12">
													<label class="col-form-label">End Date</label>
													<fieldset class="form-icon-group left-icon position-relative">
														<input type="text" class="form-control f-basic flatpickr-input" placeholder="Select Date.." readonly="readonly">
														<div class="form-icon position-absolute">
															<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
																<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
																<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
															</svg>
														</div>
													</fieldset>
												</div>
												<div class="col-12">
													<button class="btn btn-primary">Save</button>
													<button class="btn btn-outline-secondary">Cancel</button>
												</div>
											</div>
										</form>
Float Label
<form class="form-floating">
											<div class="mb-4">
												<span class="form-floating">
													<input type="text" class="form-control" id="TextInput" placeholder="Name">
													<label class="form-label" for="TextInput">Text Input</label>
												</span>
											</div>
											<div class="mb-4">
												<span class="form-floating">
													<input type="email" class="form-control" id="emailInput" placeholder="password">
													<label class="form-label" for="emailInput">Email Input</label>
												</span>
											</div>
											<div class="mb-4">
												<span class="form-floating">
													<textarea class="form-control" id="TextArea" rows="5" cols="30" placeholder="Comment"></textarea>
													<label class="form-label" for="TextArea">Text Area</label>
												</span>
											</div>
											<div class="mb-4">
												<div class="form-floating">
													<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
														<option selected>Open this select menu</option>
														<option value="1">One</option>
														<option value="2">Two</option>
														<option value="3">Three</option>
													</select>
													<label for="floatingSelect">Works with selects</label>
												</div>
											</div>
											<div class="mb-4">
												<button class="btn btn-primary">Save</button>
												<button class="btn btn-outline-secondary">Cancel</button>
											</div>
										</form>
Checkout form

Your cart 3

  • Product name
    Brief description
    $12
  • Second product
    Brief description
    $8
  • Third item
    Brief description
    $5
  • Promo code
    EXAMPLECODE
    −$5
  • Total (USD) $20

Billing address

Valid first name is required.
Valid last name is required.
@
Your username is required.
Please enter a valid email address for shipping updates.
Please enter your shipping address.
Please select a valid country.
Please provide a valid state.
Zip code required.


Payment

Full name as displayed on card
Name on card is required
Credit card number is required
Expiration date required
Security code required

<div class="row g-5">
										<div class="col-md-5 col-lg-4 order-md-last">
										<h4 class="d-flex justify-content-between align-items-center mb-3">
											<span class="text-primary h6">Your cart</span>
											<span class="badge bg-primary rounded-pill">3</span>
										</h4>
										<ul class="list-group mb-3">
											<li class="list-group-item d-flex justify-content-between lh-sm">
											<div>
												<h6 class="my-0">Product name</h6>
												<small class="text-muted">Brief description</small>
											</div>
											<span class="text-muted">$12</span>
											</li>
											<li class="list-group-item d-flex justify-content-between lh-sm">
											<div>
												<h6 class="my-0">Second product</h6>
												<small class="text-muted">Brief description</small>
											</div>
											<span class="text-muted">$8</span>
											</li>
											<li class="list-group-item d-flex justify-content-between lh-sm">
											<div>
												<h6 class="my-0">Third item</h6>
												<small class="text-muted">Brief description</small>
											</div>
											<span class="text-muted">$5</span>
											</li>
											<li class="list-group-item d-flex justify-content-between bg-light">
											<div class="text-success">
												<h6 class="my-0">Promo code</h6>
												<small>EXAMPLECODE</small>
											</div>
											<span class="text-success">−$5</span>
											</li>
											<li class="list-group-item d-flex justify-content-between">
											<span>Total (USD)</span>
											<strong>$20</strong>
											</li>
										</ul>
										
										<form class="card p-2">
											<div class="input-group">
											<input type="text" class="form-control" placeholder="Promo code">
											<button type="submit" class="btn btn-secondary">Redeem</button>
											</div>
										</form>
										</div>
										<div class="col-md-7 col-lg-8">
										<h4 class="mb-3 h6">Billing address</h4>
										<form class="needs-validation" novalidate="">
											<div class="row g-3">
											<div class="col-sm-6">
												<label for="firstName" class="form-label">First name</label>
												<input type="text" class="form-control" id="firstName" placeholder="" value="" required="">
												<div class="invalid-feedback">
												Valid first name is required.
												</div>
											</div>
										
											<div class="col-sm-6">
												<label for="lastName" class="form-label">Last name</label>
												<input type="text" class="form-control" id="lastName" placeholder="" value="" required="">
												<div class="invalid-feedback">
												Valid last name is required.
												</div>
											</div>
										
											<div class="col-12">
												<label for="username" class="form-label">Username</label>
												<div class="input-group has-validation">
												<span class="input-group-text">@</span>
												<input type="text" class="form-control" id="username" placeholder="Username" required="">
												<div class="invalid-feedback">
													Your username is required.
												</div>
												</div>
											</div>
										
											<div class="col-12">
												<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
												<input type="email" class="form-control" id="email" placeholder="you@gmail.com">
												<div class="invalid-feedback">
												Please enter a valid email address for shipping updates.
												</div>
											</div>
										
											<div class="col-12">
												<label for="address" class="form-label">Address</label>
												<input type="text" class="form-control" id="address" placeholder="1234 Main St" required="">
												<div class="invalid-feedback">
												Please enter your shipping address.
												</div>
											</div>
										
											<div class="col-12">
												<label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
												<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
											</div>
										
											<div class="col-md-5">
												<label for="country" class="form-label">Country</label>
												<select class="form-select" id="country" required="">
												<option value="">Choose...</option>
												<option>United States</option>
												</select>
												<div class="invalid-feedback">
												Please select a valid country.
												</div>
											</div>
										
											<div class="col-md-4">
												<label for="state" class="form-label">State</label>
												<select class="form-select" id="state" required="">
												<option value="">Choose...</option>
												<option>California</option>
												</select>
												<div class="invalid-feedback">
												Please provide a valid state.
												</div>
											</div>
										
											<div class="col-md-3">
												<label for="zip" class="form-label">Zip</label>
												<input type="text" class="form-control" id="zip" placeholder="" required="">
												<div class="invalid-feedback">
												Zip code required.
												</div>
											</div>
											</div>
										
											<hr class="my-4">
										
											<div class="form-check">
											<input type="checkbox" class="form-check-input" id="same-address">
											<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
											</div>
										
											<div class="form-check">
											<input type="checkbox" class="form-check-input" id="save-info">
											<label class="form-check-label" for="save-info">Save this information for next time</label>
											</div>
										
											<hr class="my-4">
										
											<h4 class="mb-3 h6">Payment</h4>
										
											<div class="my-3">
											<div class="form-check">
												<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked="" required="">
												<label class="form-check-label" for="credit">Credit card</label>
											</div>
											<div class="form-check">
												<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required="">
												<label class="form-check-label" for="debit">Debit card</label>
											</div>
											<div class="form-check">
												<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required="">
												<label class="form-check-label" for="paypal">PayPal</label>
											</div>
											</div>
										
											<div class="row gy-3">
											<div class="col-md-6">
												<label for="cc-name" class="form-label">Name on card</label>
												<input type="text" class="form-control" id="cc-name" placeholder="" required="">
												<small class="text-muted">Full name as displayed on card</small>
												<div class="invalid-feedback">
												Name on card is required
												</div>
											</div>
										
											<div class="col-md-6">
												<label for="cc-number" class="form-label">Credit card number</label>
												<input type="text" class="form-control" id="cc-number" placeholder="" required="">
												<div class="invalid-feedback">
												Credit card number is required
												</div>
											</div>
										
											<div class="col-md-3">
												<label for="cc-expiration" class="form-label">Expiration</label>
												<input type="text" class="form-control" id="cc-expiration" placeholder="" required="">
												<div class="invalid-feedback">
												Expiration date required
												</div>
											</div>
										
											<div class="col-md-3">
												<label for="cc-cvv" class="form-label">CVV</label>
												<input type="text" class="form-control" id="cc-cvv" placeholder="" required="">
												<div class="invalid-feedback">
												Security code required
												</div>
											</div>
											</div>
											<hr class="my-4">
											<button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
										</form>
										</div>
										</div>