Forms

<!-- Text input -->
<div class="mb-3">
  <label for="text-input" class="form-label">Text</label>
  <input type="text" class="form-control" id="text-input" value="Artisanal kale">
</div>

<!-- Search input -->
<div class="mb-3">
  <label for="search-input" class="form-label">Search</label>
  <input type="search" class="form-control" id="search-input" value="How do I shoot web">
</div>

<!-- Email input -->
<div class="mb-3">
  <label for="email-input" class="form-label">Email</label>
  <input type="email" class="form-control" id="email-input" value="email@example.com">
</div>

<!-- URL input -->
<div class="mb-3">
  <label for="url-input" class="form-label">URL</label>
  <input type="url" class="form-control" id="url-input" value="https://getbootstrap.com">
</div>

<!-- Phone input -->
<div class="mb-3">
  <label for="tel-input" class="form-label">Phone</label>
  <input type="tel" class="form-control" id="tel-input" value="1-(770)-334-2518">
</div>

<!-- Password input -->
<div class="mb-3">
  <label for="pass-input" class="form-label">Password</label>
  <input type="password" class="form-control" id="pass-input" value="mypasswordexample">
</div>

<!-- Textarea -->
<div class="mb-3">
  <label for="textarea-input" class="form-label">Textarea</label>
  <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea>
</div>

<!-- Select -->
<div class="mb-3">
  <label for="select-input" class="form-label">Select</label>
  <select class="form-select" id="select-input" aria-label="Default select example">
    <option selected disabled>Choose option...</option>
    <option value="1">Option item 1</option>
    <option value="2">Option item 2</option>
    <option value="3">Option item 3</option>
  </select>
</div>

<!-- Multiselect -->
<div class="mb-3">
  <label for="multiselect-input" class="form-label">Multiselect</label>
  <select class="form-select" id="multiselect-input" size="3" multiple aria-label="Multiple select example">
    <option value="1" selected>Option item 1</option>
    <option value="2">Option item 2</option>
    <option value="3">Option item 3</option>
    <option value="4">Option item 4</option>
    <option value="5">Option item 5</option>
    <option value="6">Option item 6</option>
  </select>
</div>

<!-- File input -->
<div class="mb-3">
  <label for="file-input" class="form-label">File</label>
  <input type="file" class="form-control" id="file-input">
</div>

<!-- Number input -->
<div class="mb-3">
  <label for="number-input" class="form-label">Number</label>
  <input type="number" class="form-control" id="number-input" value="37">
</div>

<!-- Datalist -->
<div class="mb-3">
  <label for="datalist-input" class="form-label">Datalist</label>
  <input type="text" class="form-control" list="datalist-options" id="datalist-input" placeholder="Type to search...">
  <datalist id="datalist-options">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
  </datalist>
</div>

<!-- Range input -->
<div class="mb-3">
  <label for="range-input" class="form-label">Range</label>
  <input type="range" class="form-range" id="range-input">
</div>

<!-- Color input -->
<div class="mb-3">
  <label for="color-input" class="form-label">Color</label>
  <input type="color" class="form-control form-control-color" id="color-input" value="#ffa14a">
</div>

<!-- Floating label: Text input -->
<div class="form-floating mb-3">
  <input class="form-control" type="text" id="fl-text" placeholder="Your name">
  <label for="fl-text">Your name</label>
</div>

<!-- Floating label: Select -->
<div class="form-floating mb-3">
  <select class="form-select" id="fl-select" aria-label="Floating label select">
    <option value="Argentina" selected>Argentina</option>
    <option value="Belgium">Belgium</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="Japan">Japan</option>
    <option value="Spain">Spain</option>
    <option value="USA">USA</option>
  </select>
  <label for="fl-select">Your country</label>
</div>

<!-- Floating label: Textarea -->
<div class="form-floating mb-3">
  <textarea class="form-control" id="fl-textarea" style="height: 120px;" placeholder="Your message"></textarea>
  <label for="fl-textarea">Your message</label>
</div>

<!-- Password visibility toggle -->
<div class="mb-3">
  <label for="pass-visibility" class="form-label">Password</label>
  <div class="password-toggle">
    <input type="password" class="form-control" id="pass-visibility" value="hidden@password">
    <label class="password-toggle-button" aria-label="Show/hide password">
      <input type="checkbox" class="btn-check">
    </label>
  </div>
</div>

<!-- Stacked checkboxes -->
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="ex-check-1">
  <label for="ex-check-1" class="form-check-label">Check this checkbox</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="ex-check-2" checked>
  <label for="ex-check-2" class="form-check-label">Uncheck this checkbox</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="ex-check-3" disabled>
  <label for="ex-check-3" class="form-check-label">Disabled checkbox</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="ex-check-4" checked disabled>
  <label for="ex-check-4" class="form-check-label">Disabled checked</label>
</div>

<!-- Inline checkboxes -->
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="ex-check-5">
  <label for="ex-check-5" class="form-check-label">Check this checkbox</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="ex-check-6" checked>
  <label for="ex-check-6" class="form-check-label">Uncheck this checkbox</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="ex-check-7" disabled>
  <label for="ex-check-7" class="form-check-label">Disabled checkbox</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="ex-check-8" checked disabled>
  <label for="ex-check-8" class="form-check-label">Disabled checked</label>
</div>

<!-- Stacked radio buttons -->
<div class="form-check">
  <input type="radio" class="form-check-input" id="ex-radio-1" name="radio">
  <label for="ex-radio-1" class="form-check-label">Toggle this radio</label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="ex-radio-2" name="radio" checked>
  <label for="ex-radio-2" class="form-check-label">Toggle this radio</label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="ex-radio-3" disabled>
  <label for="ex-radio-3" class="form-check-label">Disabled radio</label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="ex-radio-4" checked disabled>
  <label for="ex-radio-4" class="form-check-label">Disabled checked</label>
</div>

<!-- Inline radio buttons -->
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="ex-radio-5" name="radio-inline">
  <label for="ex-radio-5" class="form-check-label">Toggle this radio</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="ex-radio-6" name="radio-inline" checked>
  <label for="ex-radio-6" class="form-check-label">Toggle this radio</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="ex-radio-7" disabled>
  <label for="ex-radio-7" class="form-check-label">Disabled radio</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="ex-radio-8" checked disabled>
  <label for="ex-radio-8" class="form-check-label">Disabled checked</label>
</div>

<!-- Idle switch -->
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-1">
  <label for="ex-switch-1" class="form-check-label">Default switch checkbox</label>
</div>

<!-- Checked switch -->
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-2" checked>
  <label for="ex-switch-2" class="form-check-label">Checked switch checkbox</label>
</div>

<!-- Disabled switch -->
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-3" disabled>
  <label for="ex-switch-3" class="form-check-label">Disabled switch checkbox</label>
</div>

<!-- Checked disabled switch -->
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" role="switch" id="ex-switch-4" checked disabled>
  <label for="ex-switch-4" class="form-check-label">Disabled checked switch checkbox</label>
</div>

<!-- All these components depend on Bootstrap's button-check which can either be radio button or checkbox. -->

<!-- Size options made of .btn-outline-secondary -->
<div class="mb-4">
  <label class="form-label pb-1 mb-2">Sizes</label>
  <div class="d-flex flex-wrap gap-2">
    <input type="radio" class="btn-check" name="size-options" id="size-1" checked>
    <label for="size-1" class="btn btn-icon btn-sm btn-outline-secondary">XL</label>
    <input type="radio" class="btn-check" name="size-options" id="size-2">
    <label for="size-2" class="btn btn-icon btn-sm btn-outline-secondary">L</label>
    <input type="radio" class="btn-check" name="size-options" id="size-3">
    <label for="size-3" class="btn btn-icon btn-sm btn-outline-secondary">M</label>
    <input type="radio" class="btn-check" name="size-options" id="size-4" disabled>
    <label for="size-4" class="btn btn-icon btn-sm btn-outline-secondary">S</label>
    <input type="radio" class="btn-check" name="size-options" id="size-5">
    <label for="size-5" class="btn btn-icon btn-sm btn-outline-secondary">XS</label>
  </div>
</div>

<!-- Model options made of .btn-outline-secondary -->
<div class="mb-4">
  <label class="form-label pb-1 mb-2">Model</label>
  <div class="d-flex flex-wrap gap-2">
    <input type="radio" class="btn-check" name="model-options" id="model-1" checked>
    <label for="model-1" class="btn btn-sm btn-outline-secondary">64 GB</label>
    <input type="radio" class="btn-check" name="model-options" id="model-2">
    <label for="model-2" class="btn btn-sm btn-outline-secondary">128 GB</label>
    <input type="radio" class="btn-check" name="model-options" id="model-3">
    <label for="model-3" class="btn btn-sm btn-outline-secondary">256 GB</label>
    <input type="radio" class="btn-check" name="model-options" id="model-4" disabled>
    <label for="model-4" class="btn btn-sm btn-outline-secondary">512 GB</label>
  </div>
</div>

<!-- Color options made of .btn-color with binded label -->
<div class="mb-4">
  <label class="form-label pb-1 mb-2">Color: <span class="text-body fw-normal" id="colorOption">Gray blue</span></label>
  <div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
    <input type="radio" class="btn-check" name="color-options" id="color-1" checked>
    <label for="color-1" class="btn btn-color fs-xl" data-label="Gray blue" style="color: #5a7aa1">
      <span class="visually-hidden">Gray blue</span>
    </label>
    <input type="radio" class="btn-check" name="color-options" id="color-2">
    <label for="color-2" class="btn btn-color fs-xl" data-label="Pink" style="color: #ee7976">
      <span class="visually-hidden">Pink</span>
    </label>
    <input type="radio" class="btn-check" name="color-options" id="color-3">
    <label for="color-3" class="btn btn-color fs-xl" data-label="Light blue" style="color: #9acbf1">
      <span class="visually-hidden">Light blue</span>
    </label>
    <input type="radio" class="btn-check" name="color-options" id="color-4">
    <label for="color-4" class="btn btn-color fs-xl" data-label="Green" style="color: #8cd1ab">
      <span class="visually-hidden">Green</span>
    </label>
  </div>
</div>

<!-- Color options made of .btn-image with binded label -->
<div class="mb-4">
  <label class="form-label pb-1 mb-2">Color: <span class="text-body fw-normal" id="colorImageOption">Viridian</span></label>
  <div class="d-flex flex-wrap gap-2" data-binded-label="#colorImageOption">
    <input type="radio" class="btn-check" name="color-image-options" id="colorImage-1" checked>
    <label for="colorImage-1" class="btn btn-image p-0" data-label="Viridian">
      <img src="assets/img/shop/furniture/product/colors/color01.png" width="56" alt="Viridian color">
      <span class="visually-hidden">Viridian</span>
    </label>
    <input type="radio" class="btn-check" name="color-image-options" id="colorImage-2">
    <label for="colorImage-2" class="btn btn-image p-0" data-label="Green">
      <img src="assets/img/shop/furniture/product/colors/color02.png" width="56" alt="Green color">
      <span class="visually-hidden">Green</span>
    </label>
    <input type="radio" class="btn-check" name="color-image-options" id="colorImage-3">
    <label for="colorImage-3" class="btn btn-image p-0" data-label="Blue">
      <img src="assets/img/shop/furniture/product/colors/color03.png" width="56" alt="Blue color">
      <span class="visually-hidden">Blue</span>
    </label>
  </div>
</div>

<!-- The number input within the Count Input component accepts two attributes: "min" and "max." See it in action in the first example below. -->
<!-- Small count input -->
<div class="count-input rounded-2 mb-3">
  <button type="button" class="btn btn-icon btn-sm" data-decrement aria-label="Decrement quantity">
    <i class="ci-minus"></i>
  </button>
  <input type="number" class="form-control form-control-sm" value="1" min="1" max="5" readonly>
  <button type="button" class="btn btn-icon btn-sm" data-increment aria-label="Increment quantity">
    <i class="ci-plus"></i>
  </button>
</div>

<!-- Normal count input -->
<div class="count-input mb-3">
  <button type="button" class="btn btn-icon" data-decrement aria-label="Decrement quantity">
    <i class="ci-minus"></i>
  </button>
  <input type="number" class="form-control" value="1" readonly>
  <button type="button" class="btn btn-icon" data-increment aria-label="Increment quantity">
    <i class="ci-plus"></i>
  </button>
</div>

<!-- Large count input -->
<div class="count-input mb-3">
  <button type="button" class="btn btn-icon btn-lg" data-decrement aria-label="Decrement quantity">
    <i class="ci-minus"></i>
  </button>
  <input type="number" class="form-control form-control-lg" value="1" readonly>
  <button type="button" class="btn btn-icon btn-lg" data-increment aria-label="Increment quantity">
    <i class="ci-plus"></i>
  </button>
</div>

<!-- Disabled count input -->
<div class="count-input disabled">
  <button type="button" class="btn btn-icon disabled" data-decrement aria-label="Decrement quantity">
    <i class="ci-minus"></i>
  </button>
  <input type="number" class="form-control" value="1" disabled>
  <button type="button" class="btn btn-icon disabled" data-increment aria-label="Increment quantity">
    <i class="ci-plus"></i>
  </button>
</div>

<!-- Range slider: Two handles + inputs -->
<label class="form-label" id="slider-label-1">Two handles + inputs</label>
<div class="range-slider pb-2 mb-4" data-range-slider='{"startMin": 280, "startMax": 720, "min": 0, "max": 1000, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="slider-label-1">
  <div class="range-slider-ui"></div>
  <div class="d-flex align-items-center">
    <div class="position-relative w-50">
      <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
      <input type="number" class="form-control form-icon-start" min="0" data-range-slider-min>
    </div>
    <i class="ci-minus text-body-emphasis mx-2"></i>
    <div class="position-relative w-50">
      <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
      <input type="number" class="form-control form-icon-start" min="0" data-range-slider-max>
    </div>
  </div>
</div>

<!-- Range slider: With value scale (pips) -->
<label class="form-label" id="slider-label-2">With value scale (pips)</label>
<div class="range-slider pb-2 mb-4" data-range-slider='{"startMin": 250, "startMax": 680, "min": 0, "max": 1000, "step": 1, "pips": true, "tooltipPrefix": "$"}' aria-labelledby="slider-label-2">
  <div class="range-slider-ui"></div>
  <div class="d-flex align-items-center pt-4">
    <div class="position-relative w-50">
      <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
      <input type="number" class="form-control form-icon-start" min="0" data-range-slider-min>
    </div>
    <i class="ci-minus text-body-emphasis mx-2"></i>
    <div class="position-relative w-50">
      <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
      <input type="number" class="form-control form-icon-start" min="0" data-range-slider-max>
    </div>
  </div>
</div>

<!-- One handle + no inputs -->
<label class="form-label" id="slider-label-3">One handle + no inputs</label>
<div class="range-slider" data-range-slider='{"startMin": 450, "min": 0, "max": 1000, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="slider-label-3">
  <div class="range-slider-ui"></div>
  <input type="hidden" class="form-control" data-range-slider-min>
</div>

<!-- Alter the shape of .form-control component with .rounded-* utility classes. -->

<!-- Rounded text input -->
<input type="text" class="form-control mb-3" placeholder="Rounded input">

<!-- Pill text input -->
<input type="text" class="form-control rounded-pill mb-3" placeholder="Pill input">

<!-- Square text input -->
<input type="text" class="form-control rounded-0 mb-3" placeholder="Square input">

<!-- Rounded select -->
<select class="form-select mb-3" aria-label="Rounded select">
  <option selected disabled>Choose option...</option>
  <option value="1">Option item 1</option>
  <option value="2">Option item 2</option>
  <option value="3">Option item 3</option>
</select>

<!-- Pill select -->
<select class="form-select rounded-pill mb-3" aria-label="Pill select">
  <option selected disabled>Choose option...</option>
  <option value="1">Option item 1</option>
  <option value="2">Option item 2</option>
  <option value="3">Option item 3</option>
</select>

<!-- Square select -->
<select class="form-select rounded-0 mb-3" aria-label="Square select">
  <option selected disabled>Choose option...</option>
  <option value="1">Option item 1</option>
  <option value="2">Option item 2</option>
  <option value="3">Option item 3</option>
</select>

<!-- Large text input -->
<div class="mb-3">
  <label for="input-lg" class="form-label fs-base">Large input</label>
  <input type="text" class="form-control form-control-lg" id="input-lg" placeholder="Large input placeholder">
</div>

<!-- Normal text input -->
<div class="mb-3">
  <label for="input-md" class="form-label">Normal input</label>
  <input type="text" class="form-control" id="input-md" placeholder="Normal input placeholder">
</div>

<!-- Small text input -->
<div class="mb-3">
  <label for="input-sm" class="form-label fs-xs">Small input</label>
  <input type="text" class="form-control form-control-sm" id="input-sm" placeholder="Small input placeholder">
</div>

<!-- Large select -->
<div class="mb-3">
  <label for="select-lg" class="form-label fs-base">Large select</label>
  <select class="form-select form-select-lg" id="select-lg">
    <option selected disabled>Choose option...</option>
    <option value="1">Option item 1</option>
    <option value="2">Option item 2</option>
    <option value="3">Option item 3</option>
  </select>
</div>

<!-- Normal select -->
<div class="mb-3">
  <label for="select-md" class="form-label">Normal select</label>
  <select class="form-select" id="select-md">
    <option selected disabled>Choose option...</option>
    <option value="1">Option item 1</option>
    <option value="2">Option item 2</option>
    <option value="3">Option item 3</option>
  </select>
</div>

<!-- Small select -->
<div class="mb-3">
  <label for="select-sm" class="form-label fs-xs">Small select</label>
  <select class="form-select form-select-sm" id="select-sm">
    <option selected disabled>Choose option...</option>
    <option value="1">Option item 1</option>
    <option value="2">Option item 2</option>
    <option value="3">Option item 3</option>
  </select>
</div>

<!-- Readonly text input -->
<input type="text" class="form-control mb-3" value="Readonly input" readonly>

<!-- Readonly plain text input -->
<input type="text" class="form-control-plaintext fs-sm mb-3" value="Plain text input" readonly>

<!-- Disabled text input -->
<input type="text" class="form-control mb-3" value="Disabled input" disabled>

<!-- Disabled select -->
<select class="form-select mb-3" aria-label="Disabled select" disabled>
  <option selected disabled>Disabled select</option>
  <option value="1">Option item 1</option>
  <option value="2">Option item 2</option>
  <option value="3">Option item 3</option>
</select>

<!-- Inline form built with rows and columns -->
<form class="row row-cols-sm-auto g-3 align-items-center">
  <div class="col-12">
    <label for="inline-form-input" class="visually-hidden">Full name</label>
    <input type="text" class="form-control" id="inline-form-input" placeholder="Full name">
  </div>
  <div class="col-12">
    <label for="inline-form-input" class="visually-hidden">Preference</label>
    <select class="form-select" id="inline-form-select">
      <option selected disabled>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input type="checkbox" id="inline-form-check" class="form-check-input">
      <label for="inline-form-check" class="form-check-label">Remember me</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

<!-- Adding helper description text to the form input with .form-text -->
<label for="inputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Your password..." aria-labelledby="passwordHelpBlock">
<div class="form-text" id="passwordHelpBlock">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

<!-- Forms validation: status text -->
<form class="needs-validation" novalidate>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label for="validationText01" class="form-label">First name</label>
      <input type="text" class="form-control" id="validationText01" placeholder="First name" value="John" required>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationText02" class="form-label">Last name</label>
      <input type="text" class="form-control" id="validationText02" placeholder="Last name" value="Doe" required>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTextUsername" class="form-label">Username</label>
      <input type="text" class="form-control" id="validationTextUsername" placeholder="Username" required>
      <div class="invalid-feedback">Please choose a username.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="validationText03" class="form-label">City</label>
      <select class="form-select" id="validationText03" required>
        <option value="" selected disabled>Choose city...</option>
        <option value="Dallas">Dallas</option>
        <option value="Houston">Houston</option>
        <option value="Los Angeles">Los Angeles</option>
        <option value="Miami">Miami</option>
        <option value="New York">New York</option>
      </select>
      <div class="invalid-feedback">Please provide a valid city.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationText04" class="form-label">State</label>
      <select class="form-select" id="validationText04" required>
        <option value="" selected disabled>Choose state...</option>
        <option value="Arizona">Arizona</option>
        <option value="Colorado">Colorado</option>
        <option value="Florida">Florida</option>
        <option value="Indiana">Indiana</option>
        <option value="Kentucky">Kentucky</option>
        <option value="Texas">Texas</option>
      </select>
      <div class="invalid-feedback">Please provide a valid state.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationText05" class="form-label">Zip</label>
      <input type="text" class="form-control" id="validationText05" placeholder="Zip" required>
      <div class="invalid-feedback">Please provide a valid zip.</div>
      <div class="valid-feedback">Looks good!</div>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="validationText06" required>
      <label for="validationText06" class="form-check-label">Agree to terms and conditions</label>
      <div class="invalid-feedback">You must agree before submitting.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>