Forms

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

<!-- Search input -->
<div class="mb-3">
  <label for="search-input" class="form-label">Search</label>
  <input class="form-control" type="search" 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 class="form-control" type="email" id="email-input" value="email@example.com">
</div>

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

<!-- Phone Input -->
<div class="mb-3">
  <label for="tel-input" class="form-label">Phone</label>
  <input class="form-control" type="tel" 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 class="form-control" type="password" 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">
    <option>Choose option...</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>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>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
    <option>Option item 4</option>
    <option>Option item 5</option>
    <option>Option item 6</option>
  </select>
</div>

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

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

<!-- Datalist -->
<div class="mb-3">
  <label for="datalist-input" class="form-label">Datalist</label>
  <input 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 class="form-control" type="range" id="range-input">
</div>

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

// Text input
.mb-3
  label(for="text-input").form-label
    | Text
  input(type="text", id="text-input", value="Artisanal kale").form-control

// Search input
.mb-3
  label(for="search-input").form-label
    | Search
  input(type="search", id="search-input", value="How do I shoot web").form-control

// Email input
.mb-3
  label(for="email-input").form-label
    | Email
  input(type="email", id="email-input", value="email@example.com").form-control

// URL input
.mb-3
  label(for="url-input").form-label
    | URL
  input(type="url", id="url-input", value="https://getbootstrap.com").form-control

// Phone input
.mb-3
  label(for="tel-input").form-label
    | Phone
  input(type="tel", id="tel-input", value="1-(770)-334-2518").form-control

// Password input
.mb-3
  label(for="pass-input").form-label
    | Password
  input(type="password", id="pass-input", value="mypasswordexample").form-control

// Textarea
.mb-3
  label(for="textarea-input").form-label
    | Textarea
  textarea(id="textarea-input", rows="5").form-control Hello World!

// Select
.mb-3
  label(for="select-input").form-label
    | Select
  select(id="select-input").form-select
    option Choose option...
    option Option item 1
    option Option item 2
    option Option item 3

// Multiselect
.mb-3
  label(for="multiselect-input").form-label
    | Multiselect
  select(id="multiselect-input", size="3", multiple).form-select
    option Option item 1
    option Option item 2
    option Option item 3
    option Option item 4
    option Option item 5
    option Option item 6

// File input
.mb-3
  label(for="file-input").form-label
    | File
  input(type="file", id="file-input").form-control

// Number input
.mb-3
  label(for="number-input").form-label
    | Number
  input(type="number", id="number-input", value="37").form-control

// Datalist
.mb-3
  label(for="datalist-input").form-label
    | Datalist
  input(list="datalist-options", id="datalist-input", placeholder="Type to search...").form-control
  datalist#datalist-options
    option(value="San Francisco")
    option(value="New York")
    option(value="Seattle")
    option(value="Los Angeles")
    option(value="Chicago")

// Range input
.mb-3
  label(for="range-input").form-label
    | Range
  input(type="range", id="range-input").form-range
                
// Color input
.mb-3
  label(for="color-input").form-label
    | Color
  input(type="color", id="color-input", value="#ed5050").form-control.form-control-color

<!-- 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">
    <option selected>Argentina</option>
    <option>Belgium</option>
    <option>France</option>
    <option>Germany</option>
    <option>Japan</option>
    <option>Spain</option>
    <option>USA</option>
  </select>
  <label for="fl-select">Your country</label>
</div>

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

// Floating label: Text input
.form-floating.mb-3
  input(type="text", id="fl-text", placeholder="Your name").form-control
  label(for="fl-text") Your name

// Floating label: Select
.form-floating.mb-3
  select(id="fl-select").form-select
    option(selected) Argentina
    option Belgium
    option France
    option Germany
    option Japan
    option Spain
    option USA
  label(for="fl-select") Your country

// Floating label: Textarea
.form-floating.mb-3
  textarea(id="fl-textarea", style="height: 120px;", placeholder="Your message").form-control
  label(for="fl-textarea") Your message

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

// Password visibility toggle
.mb-3
  label(for="pass-visibility").form-label
    | Password
  .password-toggle
    input(type="password", id="pass-visibility", value="hidden@password").form-control
    label(aria-label="Show/hide password").password-toggle-btn
      input(type="checkbox").password-toggle-check
      span.password-toggle-indicator

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

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

// Stacked checkboxes
.form-check
  input(type="checkbox", id="ex-check-1").form-check-input
  label.form-check-label(for="ex-check-1") Check this checkbox
.form-check
  input(type="checkbox", id="ex-check-2", checked).form-check-input
  label.form-check-label(for="ex-check-2") Uncheck this checkbox
.form-check
  input(type="checkbox", id="ex-check-3", disabled).form-check-input
  label.form-check-label(for="ex-check-3") Disabled checkbox

// Inline checkboxes
.form-check.form-check-inline
  input(type="checkbox", id="ex-check-4").form-check-input
  label.form-check-label(for="ex-check-4") Check this checkbox
.form-check.form-check-inline
  input(type="checkbox" id="ex-check-5", checked).form-check-input
  label.form-check-label(for="ex-check-5") Uncheck this checkbox
.form-check.form-check-inline
  input(type="checkbox", id="ex-check-6", disabled).form-check-input
  label.form-check-label(for="ex-check-6") Disabled checkbox

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

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

// Stacked radio buttons
.form-check
  input(type="radio", id="ex-radio-1", name="radio").form-check-input
  label.form-check-label(for="ex-radio-1") Toggle this radio
.form-check
  input(type="radio", id="ex-radio-2", name="radio", checked).form-check-input
  label.form-check-label(for="ex-radio-2") Toggle this radio
.form-check
  input(type="radio", id="ex-radio-3", name="radio", disabled).form-check-input
  label.form-check-label(for="ex-radio-3") Disabled radio

// Inline radio buttons
.form-check.form-check-inline
  input(type="radio", id="ex-radio-4", name="radio2").form-check-input
  label.form-check-label(for="ex-radio-4") Toggle this radio
.form-check.form-check-inline
  input(type="radio", id="ex-radio-5", name="radio2", checked).form-check-input
  label.form-check-label(for="ex-radio-5") Toggle this radio
.form-check.form-check-inline
  input(type="radio", id="ex-radio-6", name="radio2", disabled).form-check-input
  label.form-check-label(for="ex-radio-6") Disabled radio

<!-- Switch -->
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="customSwitch1">
  <label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
</div>

<!-- Checked switch -->
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="customSwitch2" checked>
  <label class="form-check-label" for="customSwitch2">Toggle this switch element</label>
</div>

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

// Switch
.form-check.form-switch
  input(type="checkbox", id="customSwitch1").form-check-input
  label.form-check-label(for="customSwitch1") Toggle this switch element

// Checked switch
.form-check.form-switch
  input(type="checkbox", id="customSwitch2", checked).form-check-input
  label.form-check-label(for="customSwitch2") Toggle this switch element

// Disabled switch
.form-check.form-switch
  input(type="checkbox", id="customSwitch3", disabled).form-check-input
  label.form-check-label(for="customSwitch3") Disabled switch element

<!-- Theme mode switch. Can be used oly once on the page! -->
<div class="form-check form-switch mode-switch" data-bs-toggle="mode">
  <input type="checkbox" class="form-check-input" id="theme-mode">
  <label for="theme-mode" class="form-check-label">
    <i class="ai-sun fs-lg"></i>
  </label>
  <label for="theme-mode" class="form-check-label">
    <i class="ai-moon fs-lg"></i>
  </label>
</div>

// Theme mode switch. Can be used oly once on the page!
.form-check.form-switch.mode-switch(data-bs-toggle="mode")
  input(type="checkbox")#theme-mode.form-check-input
  label(for="theme-mode").form-check-label
    i.ai-sun.fs-lg
  label(for="theme-mode").form-check-label
    i.ai-moon.fs-lg

<!-- Color radio buttons with binded label. Change input type to checkbox to siwth to multiselect behavior. -->
<div class="h6">
  Color:
  <span class="text-muted fw-normal ms-1" id="colorOption">
    Gray marble
  </span>
</div>
<div class="d-flex">
  <div class="me-2 mb-2">
    <input type="radio" class="btn-check" id="color1" name="color" data-binded-label="colorOption" value="Gray marble" checked>
    <label for="color1" class="btn btn-icon btn-sm btn-outline-secondary rounded-circle">
      <span class="d-block bg-size-cover bg-position-center rounded-circle" style="width: 1.5rem; height: 1.5rem; background-color: #c0c0c0; background-image: url(assets/img/shop/pattern/marble.jpg);"></span>
    </label>
  </div>
  <div class="me-2 mb-2">
    <input type="radio" class="btn-check" id="color2" name="color" data-binded-label="colorOption" value="Soft beige">
    <label for="color2" class="btn btn-icon btn-sm btn-outline-secondary rounded-circle">
      <span class="d-block rounded-circle" style="width: 1.5rem; height: 1.5rem; background-color: #d9c9a1;"></span>
    </label>
  </div>
</div>


<!-- Small color radio button example -->
<input type="radio" class="btn-check" id="color" name="color" value="Soft beige">
<label for="color" class="btn btn-icon btn-xs btn-outline-secondary rounded-circle">
  <span class="d-block rounded-circle" style="width: .625rem; height: .625rem; background-color: #d9c9a1;"></span>
</label>


<!-- Radio buttons with text inside. Ideal for size, weight selection -->
<div class="d-flex">
  <div class="me-3">
    <input type="radio" class="btn-check" id="weight1" name="weight" value="140 g" checked>
    <label for="weight1" class="btn btn-outline-secondary px-2">
      <span class="mx-1">140 g</span>
    </label>
  </div>
  <div class="me-3">
    <input type="radio" class="btn-check" id="weight2" name="weight" value="260 g">
    <label for="weight2" class="btn btn-outline-secondary px-2">
      <span class="mx-1">260 g</span>
    </label>
  </div>
</div>

// Color radio buttons with binded label. Change input type to checkbox to siwth to multiselect behavior.
.h6
  | Color:
  span#colorOption.text-muted.fw-normal.ms-1 Gray marble
.d-flex

  // Image pattern
  .me-2.mb-2
    input(type="radio", name="color", data-binded-label="colorOption", value="Gray marble", checked)#color1.btn-check
    label(for="color1").btn.btn-icon.btn-sm.btn-outline-secondary.rounded-circle
      span(style="width: 1.5rem; height: 1.5rem; background-color: #c0c0c0; background-image: url(assets/img/shop/pattern/marble.jpg);").d-block.bg-size-cover.bg-position-center.rounded-circle
  
  // Solid color
  .me-2.mb-2
    input(type="radio", name="color", data-binded-label="colorOption", value="Soft beige")#color2.btn-check
    label(for="color2").btn.btn-icon.btn-sm.btn-outline-secondary.rounded-circle
      span(style="width: 1.5rem; height: 1.5rem; background-color: #d9c9a1;").d-block.rounded-circle


// Small color radio button example
input(type="radio", name="color", value="Bluish sky")#color.btn-check
label(for="color").btn.btn-icon.btn-xs.btn-outline-secondary.rounded-circle
  span(style="width: .625rem; height: .625rem; background-color: #a1b7d9;").d-block.rounded-circle


// Radio buttons with text inside. Ideal for size, weight selection
.d-flex
  .me-3
    input(type="radio", name="weight", value="140 g" checked)#weight1.btn-check
    label(for="weight1").btn.btn-outline-secondary.px-2
      span.mx-1 140 g
  .me-3
    input(type="radio", name="weight", value="260 g")#weight2.btn-check
    label(for="weight2").btn.btn-outline-secondary.px-2
      span.mx-1 260 g

<!-- Count input naked variant -->
<div class="count-input">
  <button type="button" class="btn btn-icon fs-xl" data-decrement>-</button>
  <input type="number" class="form-control" value="1" readonly>
  <button type="button" class="btn btn-icon fs-xl" data-decrement>+</button>
</div>

<!-- Count input naked variant -->
<div class="count-input bg-gray rounded-3">
  <button type="button" class="btn btn-icon btn-lg fs-xl" data-decrement>-</button>
  <input type="number" class="form-control" value="2" readonly>
  <button type="button" class="btn btn-icon btn-lg fs-xl" data-decrement>+</button>
</div>

// Count input naked variant
.count-input
  button(type="button", data-decrement).btn.btn-icon.fs-xl
    | -
  input(type="number", value="1", readonly).form-control
  button(type="button", data-increment).btn.btn-icon.fs-xl
    | +

// Count input with gray background
.count-input.bg-gray.rounded-3
  button(type="button", data-decrement).btn.btn-icon.btn-lg.fs-xl
    | -
  input(type="number", value="2", readonly).form-control
  button(type="button", data-increment).btn.btn-icon.btn-lg.fs-xl
    | +

<!-- Range slider: Two handles + inputs -->
<div class="range-slider" data-start-min="280" data-start-max="720" data-min="0" data-max="1000" data-step="1">
  <div class="range-slider-ui"></div>
  <div class="d-flex">
    <div class="d-flex align-items-center w-50">
      <label for="rs-min" class="form-label fs-xs me-2 mb-0">From</label>
      <input type="number" id="rs-min" class="form-control form-control-sm range-slider-value-min" style="max-width: 6rem;">
    </div>
    <div class="d-flex align-items-center w-50">
      <label for="rs-max" class="form-label fs-xs me-2 mb-0">To</label>
      <input type="number" id="rs-max" class="form-control form-control-sm range-slider-value-max" style="max-width: 6rem;">
    </div>
  </div>
</div>

<!-- Range slider: With value scale (pips) -->
<div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1" data-pips="true">
  <div class="range-slider-ui"></div>
  <div class="d-flex">
    <div class="d-flex align-items-center w-50">
      <label for="rs-min" class="form-label fs-xs me-2 mb-0">From</label>
      <input type="number" id="rs-min" class="form-control form-control-sm range-slider-value-min" style="max-width: 6rem;">
    </div>
    <div class="d-flex align-items-center w-50">
      <label for="rs-max" class="form-label fs-xs me-2 mb-0">To</label>
      <input type="number" id="rs-max" class="form-control form-control-sm range-slider-value-max" style="max-width: 6rem;">
    </div>
  </div>
</div>

<!-- Range slider: One handle + no inputs -->
<div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1">
  <div class="range-slider-ui"></div>
  <input type="hidden" class="form-control range-slider-value-min">
</div>

// Range slider: Two handles + inputs
.range-slider(data-start-min="280", data-start-max="720", data-min="0", data-max="1000", data-step="1")
  .range-slider-ui
  .d-flex
    .d-flex.align-items-center.w-50
      label(for="rs-min").form-label.fs-xs.me-2.mb-0
        | From
      input(type="number", style="max-width: 6rem;")#rs-min.form-control.form-control-sm.range-slider-value-min
    .d-flex.align-items-center.justify-content-end.w-50
      label(for="rs-max").form-label.fs-xs.me-2.mb-0
        | To
      input(type="number", style="max-width: 6rem;")#rs-max.form-control.form-control-sm.range-slider-value-max

// Range slider: With value scale (pips)
.range-slider(data-start-min="250", data-start-max="680", data-min="0", data-max="1000", data-step="1", data-pips="true")
  .range-slider-ui
  .d-flex.position-relative.zindex-5
    .d-flex.align-items-center.w-50
      label(for="rs-min2").form-label.fs-xs.me-2.mb-0
        | From
      input(type="number", style="max-width: 6rem;")#rs-min2.form-control.form-control-sm.range-slider-value-min
    .d-flex.align-items-center.justify-content-end.w-50
      label(for="rs-max2").form-label.fs-xs.me-2.mb-0
        | To
      input(type="number", style="max-width: 6rem;")#rs-max2.form-control.form-control-sm.range-slider-value-max

// Range slider: One handle + no inputs
.range-slider(data-start-min="450", data-min="0", data-max="1000", data-step="1")
  .range-slider-ui
  input(type="hidden").form-control.range-slider-value-min

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

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

<!-- Small input -->
<div class="mb-3">
  <label for="input-sm" class="form-label fs-xs">Small input</label>
  <input type="text" id="input-sm" class="form-control form-control-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 id="select-lg" class="form-select form-select-lg">
    <option>Large select option</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
  </select>
</div>

<!-- Normal select -->
<div class="mb-3">
  <label for="select-md" class="form-label">Normal select</label>
  <select id="select-md" class="form-select">
    <option>Normal select option</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>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 id="select-sm" class="form-select form-select-sm">
    <option>Small select option</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
  </select>
</div>

// Large input
.mb-3
  label(for="input-lg").form-label.fs-base
    | Large input
  input(type="text", placeholder="Large input placeholder")#input-lg.form-control.form-control-lg

// Normal input
.mb-3
  label(for="input-md").form-label
    | Normal input
  input(type="text", placeholder="Normal input placeholder")#input-md.form-control

// Small input
.mb-3
  label(for="input-sm").form-label.fs-xs
    | Small input
  input(type="text", placeholder="Small input placeholder")#input-sm.form-control.form-control-sm

// Large select
.mb-3
  label(for="select-lg").form-label.fs-base
    | Large select
  select#select-lg.form-select.form-select-lg
    option Large select option
    option Option item 1
    option Option item 2
    option Option item 3

// Normal select
.mb-3
  label(for="select-md").form-label
    | Normal select
  select#select-md.form-select
    option Normal select option
    option Option item 1
    option Option item 2
    option Option item 3

// Small select
.mb-3
  label(for="select-sm").form-label.fs-xs
    | Small select
  select#select-sm.form-select.form-select-sm
    option Small select option
    option Option item 1
    option Option item 2
    option Option item 3

<!-- Readonly input -->
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

<!-- Disabled input -->
<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

<!-- Disabled select -->
<select class="form-select" disabled>
  <option>Disabled select here...</option>
  <option>Option item 1</option>
  <option>Option item 2</option>
  <option>Option item 3</option>
</select>

// Readonly input
input(type="text", placeholder="Readonly input here...", readonly).form-control

// Disabled input
input(type="text", placeholder="Disabled input here...", disabled).form-control

// Disabled select
select(disabled).form-select
  option Disabled select here...
  option Option item 1
  option Option item 2
  option Option item 3

<!-- Inline form -->
<form class="row row-cols-sm-auto g-3 align-items-center">
  <div class="col-12">
    <input type="text" id="inline-form-input" class="form-control" placeholder="Full name">
  </div>
  <div class="col-12">
    <select id="inline-form-select" class="form-select">
      <option value="">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>

// Inline form
form.row.row-cols-sm-auto.g-3.align-items-center
  .col-12
    input(type="text", placeholder="Full name")#inline-form-input.form-control
  .col-12
    select#inline-form-select.form-select
      option(value="") Choose
      option(value="1") One
      option(value="2") Two
      option(value="3") Three
  .col-12
    .form-check
      input(type="checkbox")#inline-form-check.form-check-input
      label(for="inline-form-check").form-check-label
        | Remember me
  .col-12
    button(type="submit").btn.btn-primary
      | Submit

<!-- Form help text -->
<div class="mb-3">
  <label for="help-text-input" class="form-label">Password</label>
  <input class="form-control" type="password" id="help-text-input" placeholder="Your password here">
  <div class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div>
</div>

// Form help text
.mb-3
  label(for="help-text-input").form-label
    | Password
  input(type="password", id="help-text-input", placeholder="Your password here").form-control
  .form-text
    | Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

<!-- Forms validation: status text -->
<form class="needs-validation" novalidate>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01" class="form-label">First name</label>
      <input class="form-control" type="text" id="validationCustom01" placeholder="First name" value="John" required>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02" class="form-label">Last name</label>
      <input class="form-control" type="text" id="validationCustom02" placeholder="Last name" value="Doe" required>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername" class="form-label">Username</label>
      <input class="form-control" type="text" id="validationCustomUsername" 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="validationCustom03" class="form-label">City</label>
      <select class="form-select" id="validationCustom03" required>
        <option value="">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="validationCustom04" class="form-label">State</label>
      <select class="form-select" id="validationCustom04" required>
        <option value="">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="validationCustom05" class="form-label">Zip</label>
      <input class="form-control" type="text" id="validationCustom05" 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 class="form-check-input" type="checkbox" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">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>

// Forms validation: status text
form(novalidate).needs-validation
  .row
    .col-md-4.mb-3
      label(for="validationCustom01").form-label
        | First name
      input(type="text", id="validationCustom01", placeholder="First name", value="John", required).form-control
      .valid-feedback
        | Looks good!
    .col-md-4.mb-3
      label(for="validationCustom02").form-label
        | Last name
      input(type="text", id="validationCustom02", placeholder="Last name", value="Doe", required).form-control
      .valid-feedback
        | Looks good!
    .col-md-4.mb-3
      label(for="validationCustomUsername").form-label
        | Username
      input(type="text", id="validationCustomUsername", placeholder="Username", required).form-control
      .invalid-feedback
        | Please choose a username.
      .valid-feedback
        | Looks good!
  .row
    .col-md-6.mb-3
      label(for="validationCustom03").form-label
        | City
      select(id="validationCustom03", required).form-select
        option(value="") Choose city...
        option(value="Dallas") Dallas
        option(value="Houston") Houston
        option(value="Los Angeles") Los Angeles
        option(value="Miami") Miami
        option(value="New York") New York
      .invalid-feedback
        | Please provide a valid city.
      .valid-feedback
        | Looks good!
    .col-md-3.mb-3
      label(for="validationCustom04").form-label
        | State
      select(id="validationCustom04", required).form-select
        option(value="") Choose state...
        option(value="Arizona") Arizona
        option(value="Colorado") Colorado
        option(value="Florida") Florida
        option(value="Indiana") Indiana
        option(value="Kentucky") Kentucky
        option(value="Texas") Texas
      .invalid-feedback
        | Please provide a valid state.
      .valid-feedback
        | Looks good!
    .col-md-3.mb-3
      label(for="validationCustom05").form-label
        | Zip
      input(type="text", id="validationCustom05", placeholder="Zip", required).form-control
      .invalid-feedback
        | Please provide a valid zip.
      .valid-feedback
        | Looks good!
  .mb-3
    .form-check
      input(type="checkbox", id="invalidCheck", required).form-check-input
      label.form-check-label(for="invalidCheck") Agree to terms and conditions
      .invalid-feedback
        | You must agree before submitting.
  button.btn.btn-primary(type="submit") Submit Form

<!-- Forms validation: status tooltips -->
<form class="needs-validation" novalidate>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01" class="form-label">First name</label>
      <input class="form-control" type="text" id="validationTooltip01" placeholder="First name" value="John" required>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02" class="form-label">Last name</label>
      <input class="form-control" type="text" id="validationTooltip02" placeholder="Last name" value="Doe" required>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername" class="form-label">Username</label>
      <input class="form-control" type="text" id="validationTooltipUsername" placeholder="Username" required>
      <div class="invalid-tooltip">Please choose a username.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03" class="form-label">City</label>
      <select class="form-select" id="validationTooltip03" required>
        <option value="">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-tooltip">Please provide a valid city.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04" class="form-label">State</label>
      <select class="form-select" id="validationTooltip04" required>
        <option value="">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-tooltip">Please provide a valid state.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05" class="form-label">Zip</label>
      <input class="form-control" type="text" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">Please provide a valid zip.</div>
      <div class="valid-tooltip">Looks good!</div>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="invalidCheck01" required>
      <label class="form-check-label" for="invalidCheck01">Agree to terms and conditions</label>
      <div class="invalid-tooltip">You must agree before submitting.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit Form</button>
</form>

// Forms validation: status tooltips
form(novalidate).needs-validation
  .row
    .col-md-4.mb-3
      label(for="validationTooltip01").form-label
        | First name
      input(type="text", id="validationTooltip01", placeholder="First name", value="John", required).form-control
      .valid-tooltip
        | Looks good!
    .col-md-4.mb-3
      label(for="validationTooltip02").form-label
        | Last name
      input(type="text", id="validationTooltip02", placeholder="Last name", value="Doe", required).form-control
      .valid-tooltip
        | Looks good!
    .col-md-4.mb-3
      label(for="validationTooltipUsername").form-label
        | Username
      input(type="text", id="validationTooltipUsername", placeholder="Username", required).form-control
      .invalid-tooltip
        | Please choose a username.
      .valid-tooltip
        | Looks good!
  .row
    .col-md-6.mb-3
      label(for="validationTooltip03").form-label
        | City
      select(id="validationTooltip03", required).form-control.custom-select
        option(value="") Choose city...
        option(value="Dallas") Dallas
        option(value="Houston") Houston
        option(value="Los Angeles") Los Angeles
        option(value="Miami") Miami
        option(value="New York") New York
      .invalid-tooltip
        | Please provide a valid city.
      .valid-tooltip
        | Looks good!
    .col-md-3.mb-3
      label(for="validationTooltip04").form-label
        | State
      select(id="validationTooltip04", required).form-control.custom-select
        option(value="") Choose state...
        option(value="Arizona") Arizona
        option(value="Colorado") Colorado
        option(value="Florida") Florida
        option(value="Indiana") Indiana
        option(value="Kentucky") Kentucky
        option(value="Texas") Texas
      .invalid-tooltip
        | Please provide a valid state.
      .valid-tooltip
        | Looks good!
    .col-md-3.mb-3
      label(for="validationTooltip05").form-label
        | Zip
      input(type="text", id="validationTooltip05", placeholder="Zip", required).form-control
      .invalid-tooltip
        | Please provide a valid zip.
      .valid-tooltip
        | Looks good!
  .mb-3
    .form-check
      input(type="checkbox", id="invalidCheck01", required).form-check-input
      label(for="invalidCheck01").form-check-label Agree to terms and conditions
      .invalid-tooltip
        | You must agree before submitting.
  button.btn.btn-primary(type="submit") Submit Form

<!-- Format: Credit card number -->
<div class="mb-3">
  <label for="cardFormat">Card number</label>
  <input type="text" class="form-control" id="cardFormat" data-format='{"creditCard": true}' placeholder="Enter credit card number">
  <div class="input-group-text py-0">
    <div class="credit-card-icon"></div>
  </div>
</div>

<!-- Format: Phone -->
<div class="mb-3">
  <label for="phoneFormat">Phone</label>
  <input type="tel" class="form-control" id="phoneFormat" data-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}' placeholder="+1 ___ ___ __">
</div>

<!-- Format: Date long -->
<div class="mb-3">
  <label for="dateFormat">Date</label>
  <input type="text" class="form-control" id="dateFormat" data-format='{"date": true, "delimiter": "-", "datePattern": ["Y", "m", "d"]}' placeholder="yyyy-mm-dd">
</div>

<!-- Format: Date short -->
<div class="mb-3">
  <label for="dateShortFormat">Date short</label>
  <input type="text" class="form-control" id="dateShortFormat" data-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="mm/yy">
</div>

<!-- Format: Time -->
<div class="mb-3">
  <label for="timeFormat">Time</label>
  <input type="text" class="form-control" id="timeFormat" data-format='{"time": true, "timePattern": ["h", "m"]}' placeholder="hh:mm">
</div>

<!-- Format: Custom blocks -->
<div class="mb-3">
  <label for="customFormat">Custom blocks</label>
  <input type="text" class="form-control" id="customFormat" data-format='{"blocks": [4, 3, 3, 4, 2], "delimiters": [".", " ", "/", "-"]}' placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']">
</div>

<!-- Format: Prefix + uppercase -->
<div class="mb-3">
  <label for="prefixFormat">Prefix + uppercase</label>
  <input type="text" class="form-control" id="prefixFormat" data-format='{"prefix": "PREFIX", "delimiter": "-", "blocks": [6, 4, 5, 3], "uppercase": true}'>
</div>

// Format: Credit card number
.mb-3
  label(for="cardFormat").form-label
    | Card number
  .input-group
    input(type="tel", data-format='{"creditCard": true}', placeholder="Enter credit card number")#cardFormat.form-control
    .input-group-text.py-0
      .credit-card-icon

// Format: Phone
.mb-3
  label(for="phoneFormat").form-label
    | Phone
  input(type="tel", data-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}', placeholder="+1 ___ ___ __")#phoneFormat.form-control

// Format: Date long
.mb-3
  label(for="dateFormat").form-label
    | Date
  input(type="text", data-format='{"date": true, "delimiter": "-", "datePattern": ["Y", "m", "d"]}', placeholder="yyyy-mm-dd")#dateFormat.form-control

// Format: Date short
.mb-3
  label(for="dateShortFormat").form-label
    | Date short
  input(type="text", data-format='{"date": true, "datePattern": ["m", "y"]}', placeholder="mm/yy")#dateShortFormat.form-control

// Format: Time
.mb-3
  label(for="timeFormat").form-label
    | Time
  input(type="text", data-format='{"time": true, "timePattern": ["h", "m"]}', placeholder="hh:mm")#timeFormat.form-control

// Format: Custom blocks
.mb-3
  label(for="customFormat").form-label
    | Custom blocks
  input(type="text", data-format='{"blocks": [4, 3, 3, 4, 2], "delimiters": [".", " ", "/", "-"]}', placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']")#customFormat.form-control

// Format: Prefix + uppercase
.mb-3
  label(for="prefixFormat").form-label
    | Prefix + uppercase
  input(type="text", data-format='{"prefix": "PREFIX", "delimiter": "-", "blocks": [6, 4, 5, 3], "uppercase": true}')#prefixFormat.form-control