-
-
-
Mateo Luca
Admin
Advanced Elements
Select Components
<div class="row">
<div class="col-lg-4">
<div class="mb-20">
<label class="label fs-16">Default Select</label>
<div class="form-floating">
<select class="form-select form-control" id="floatingSelect8" aria-label="Floating label select example">
<option selected>Select</option>
<option value="1">Steak</option>
<option value="2">Pizza</option>
<option value="3">Tacos</option>
</select>
<label for="floatingSelect8">Favorite food</label>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label fs-16">Multi Tags</label>
<div class="tag-container p-1 rounded-3 form-control h-auto p-0" id="tagContainer">
<input type="text" id="tagInput" class="form-control border-0" style="height: 49px;" placeholder="Type and press Enter">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-20">
<label class="label fs-16">Taggable Select</label>
<div class="form-floating">
<select class="form-select form-control" id="floatingSelect9" aria-label="Floating label select example">
<option selected>Select</option>
<option value="1">Fila</option>
<option value="2">Seku</option>
<option value="3">Adlo</option>
</select>
<label for="floatingSelect9">Toppings</label>
</div>
</div>
</div>
</div>
Custom country select input
<form>
<div class="row">
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label fs-16">Default Select</label>
<div class="form-group position-relative">
<select class="form-select form-control h-60" aria-label="Default select example">
<option selected class="text-dark">Value 1</option>
<option value="1" class="text-dark">Value 2</option>
<option value="2" class="text-dark">Value 3</option>
<option value="3" class="text-dark">Value 4</option>
</select>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label fs-16">Number</label>
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Enter number</label>
<div class="input-group h-60 form-control p-0">
<div class="input-group-text rounded-2 px-3 border-0">
<img src="assets/images/usa.png" alt="usa">
<span class="ms-10 text-dark">+1</span>
</div>
<input type="number" class="form-control h-auto border-0 text-dark" id="inlineFormInputGroupUsername" placeholder="Enter number">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label fs-16">Select Country</label>
<div class="form-group position-relative">
<select class="form-select form-control h-60 ps-5" aria-label="Default select example">
<option selected class="text-dark">United States</option>
<option value="1" class="text-dark">United Kingdom</option>
<option value="2" class="text-dark">Germany</option>
</select>
<img src="assets/images/usa.png" class="position-absolute top-50 start-0 translate-middle-y ms-10" alt="usa">
</div>
</div>
</div>
</div>
</form>
By Date
| S | M | T | W | T | F | S |
|---|
<div class="d-flex align-items-center mb-4 gap-5">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label fs-16" for="flexCheckDefault">
This Week
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
<label class="form-check-label fs-16" for="flexCheckDefault2">
Last Week
</label>
</div>
</div>
<div class="d-flex align-items-center mb-4 gap-5">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3">
<label class="form-check-label fs-16" for="flexCheckDefault3">
This Month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
<label class="form-check-label fs-16" for="flexCheckDefault4">
Last Month
</label>
</div>
</div>
<div class="d-flex align-items-center mb-4 gap-5">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
<label class="form-check-label fs-16" for="flexCheckDefault5">
This Year
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault6">
<label class="form-check-label fs-16" for="flexCheckDefault6">
Last Year
</label>
</div>
</div>
<div class="border-top border-bottom py-3 mb-4">
<div class="form-check">
<input class="form-check-input rounded-1" style="background-image: unset;" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label text-body fs-16" for="flexRadioDefault1">
Date Range
</label>
</div>
</div>
<div class="calendar-container style-two mb-20">
<div class="calendar-header mb-3">
<button id="prevMonth" class="change-btn">
<i class="ri-arrow-left-s-line"></i>
</button>
<div class="">
<select id="monthSelect" class="month-year"></select>
<select id="yearSelect" class="month-year"></select>
</div>
<button id="nextMonth" class="change-btn">
<i class="ri-arrow-right-s-line"></i>
</button>
</div>
<table class="calendar-table">
<thead>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody id="calendarBody">
<!-- Calendar days will be dynamically generated here -->
</tbody>
</table>
</div>
Advanced Form
<form>
<div class="mb-20">
<label class="label fs-16 mb-2">Email Address</label>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput12" placeholder="Enter email address*">
<label for="floatingInput12">Enter email address</label>
</div>
</div>
<div class="mb-20">
<label class="label fs-16 mb-2">Password</label>
<div class="form-group" id="password-show-hide">
<div class="password-wrapper position-relative password-container">
<input type="password" class="form-control text-secondary password" placeholder="Enter password *">
<i style="color: #A9A9C8; font-size: 22px; right: 15px !important;" class="ri-eye-off-line password-toggle-icon translate-middle-y top-50 end-0 position-absolute cursor text-secondary" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="mb-20">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label fs-16" for="flexCheckDefault">
Remember me
</label>
</div>
<a href="#" class="fs-16 text-primary fw-medium text-decoration-none">Forgot Password?</a>
</div>
</div>
<div class="mb-20">
<button type="button" class="btn btn-primary fw-normal text-white w-100 py-3">Sign In</button>
</div>
<div class="position-relative text-center z-1 mb-20">
<span class="fs-16 bg-white px-4">or sign in with</span>
<span class="d-block border-bottom border-2 position-absolute w-100 z-n1" style="top: 13px;"></span>
</div>
<ul class="p-0 mb-0 list-unstyled d-flex justify-content-center" style="gap: 10px;">
<li>
<a href="https://www.facebook.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #3a559f;">
<i class="ri-facebook-fill"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #03a9f4;">
<i class="ri-twitter-x-line"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #007ab9;">
<i class="ri-linkedin-fill"></i>
</a>
</li>
<li>
<a href="https://www.google.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #2196f3;">
<i class="ri-mail-line"></i>
</a>
</li>
</ul>
</form>