-
-
-
StarCode Kh
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">StarCode</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>