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="#5d3cf2">
</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="#5d3cf2").form-control.form-control-color

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

<!-- Floating label select -->
<div class="form-floating mb-3">
  <select class="form-select" id="floating-select">
    <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="floating-select">Choose option</label>
</div>

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

// Floating label select
.form-floating.mb-3
  select(id="floating-select").form-select
    option(selected) Open this select menu
    option(value="1") One
    option(value="2") Two
    option(value="3") Three
  label(for="floating-select") Choose option

<!-- Password visibility toggle -->
<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>

// Password visibility toggle
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" id="form-check-1" type="checkbox">
  <label class="form-check-label" for="form-check-1">Default checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="form-check-2" type="checkbox" checked>
  <label class="form-check-label" for="form-check-2">Checked checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="form-check-3" type="checkbox" disabled>
  <label class="form-check-label" for="form-check-3">Disabled checkbox</label>
</div>

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

// Stacked checkboxes
.form-check
  input(id="form-check-1", type="checkbox").form-check-input
  label(for="form-check-1").form-check-label
    | Default checkbox
.form-check
  input(id="form-check-2", type="checkbox", checked).form-check-input
  label(for="form-check-2").form-check-label
    | Checked checkbox
.form-check
  input(id="form-check-3", type="checkbox", disabled).form-check-input
  label(for="form-check-3").form-check-label
    | Disabled checkbox

// Inline checkboxes
.form-check.form-check-inline
  input(id="form-check-4", type="checkbox").form-check-input
  label(for="form-check-4").form-check-label
    | Default checkbox
.form-check.form-check-inline
  input(id="form-check-5", type="checkbox", checked).form-check-input
  label(for="form-check-5").form-check-label
    | Checked checkbox
.form-check.form-check-inline
  input(id="form-check-6", type="checkbox", disabled).form-check-input
  label(for="form-check-6").form-check-label
    | Disabled checkbox

<!-- Stacked radios -->
<div class="form-check">
  <input class="form-check-input" id="form-radio-1" type="radio" name="radios-stacked">
  <label class="form-check-label" for="form-radio-1">Default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="form-radio-2" type="radio" name="radios-stacked" checked>
  <label class="form-check-label" for="form-radio-2">Checked radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="form-radio-3" type="radio" name="radios-stacked" disabled>
  <label class="form-check-label" for="form-radio-3">Disabled radio</label>
</div>

<!-- Inline radios -->
<div class="form-check form-check-inline">
  <input class="form-check-input" id="form-radio-4" type="radio" name="radios-inline">
  <label class="form-check-label" for="form-radio-4">Default radio</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="form-radio-5" type="radio" name="radios-inline" checked>
  <label class="form-check-label" for="form-radio-5">Checked radio</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="form-radio-6" type="radio" name="radios-inline" disabled>
  <label class="form-check-label" for="form-radio-6">Disabled radio</label>
</div>

// Stacked radios
.form-check
  input(id="form-radio-1", type="radio", name="radios-stacked").form-check-input
  label(for="form-radio-1").form-check-label
    | Default radio
.form-check
  input(id="form-radio-2", type="radio", name="radios-stacked", checked).form-check-input
  label(for="form-radio-2").form-check-label
    | Checked radio
.form-check
  input(id="form-radio-3", type="radio", name="radios-stacked", disabled).form-check-input
  label(for="form-radio-3").form-check-label
    | Disabled radio

// Inline radios
.form-check.form-check-inline
  input(id="form-radio-4", type="radio", name="radios-inline").form-check-input
  label(for="form-radio-4").form-check-label
    | Default radio
.form-check.form-check-inline
  input(id="form-radio-5", type="radio", name="radios-inline", checked).form-check-input
  label(for="form-radio-5").form-check-label
    | Checked radio
.form-check.form-check-inline
  input(id="form-radio-6", type="radio", name="radios-inline", disabled).form-check-input
  label(for="form-radio-6").form-check-label
    | Disabled radio

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

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

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

// Default switch
.form-check.form-switch
  input(id="form-switch-1", type="checkbox").form-check-input
  label(for="form-check-1").form-check-label
    | Default switch

// Checked switch
.form-check.form-switch
  input(id="form-switch-2", type="checkbox", checked).form-check-input
  label(for="form-check-2").form-check-label
    | Checked switch

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

<!-- 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 align-items-center">
    <div class="w-50 pe-2">
      <div class="input-group"><span class="input-group-text fs-base">$</span>
        <input class="form-control range-slider-value-min" type="text">
      </div>
    </div>
    <div class="text-muted">&mdash;</div>
    <div class="w-50 ps-2">
      <div class="input-group"><span class="input-group-text fs-base">$</span>
        <input class="form-control range-slider-value-max" type="text">
      </div>
    </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 class="form-control range-slider-value-min" type="hidden">
</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.align-items-center
    .w-50.pe-2
      .input-group
        span.input-group-text.fs-base $
        input(type="text").form-control.range-slider-value-min
    .text-muted —
    .w-50.ps-2
      .input-group
        span.input-group-text.fs-base $
        input(type="text").form-control.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 class="form-label" for="input-lg">Large input</label>
  <input class="form-control form-control-lg" id="input-lg" type="text" placeholder="Large input placeholder">
</div>

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

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

<!-- Large select -->
<div class="mb-3">
  <label class="form-label" for="select-lg">Large select</label>
  <select class="form-select form-select-lg" id="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 class="form-label" for="select-normal">Normal select</label>
  <select class="form-select" id="select-normal">
    <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 class="form-label fs-sm" for="select-sm">Small select</label>
  <select class="form-select form-select-sm" id="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
    | Large input
  input(id="input-lg", type="text", placeholder="Large input placeholder").form-control.form-control-lg

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

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

// Large select
.mb-3
  label(for="select-lg").form-label
    | Large select
  select(id="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-normal").form-label
    | Normal select
  select(id="select-normal").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-sm
    | Small select
  select(id="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" id="readonly-input" type="text" placeholder="Readonly input placeholder" readonly>

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

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

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

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

// Disabled select
select(id="disabled-select", disabled).form-select
  option Disabled select option
  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 class="form-control" id="inline-form-input" type="text" placeholder="Username">
  </div>
  <div class="col-12">
    <select class="form-select" id="inline-form-select">
      <option selected>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 class="form-check-input" id="inline-form-check" type="checkbox">
      <label class="form-check-label" for="inline-form-check">Remember me</label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</form>

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

<!-- Help text -->
<div class="mb-3">
  <label class="form-label" for="input-password">Password</label>
  <input class="form-control" id="input-password" type="password" placeholder="Your password here" aria-describedby="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>
</div>

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

<!-- Form validation: status text -->
<form class="needs-validation" novalidate>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label class="form-label" for="validationCustom01">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 class="form-label" for="validationCustom02">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 class="form-label" for="validationCustomUsername">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 class="form-label" for="validationCustom03">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 class="form-label" for="validationCustom04">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 class="form-label" for="validationCustom05">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 py-2">
    <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>

// Form 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.py-2
    .form-check
      input(type="checkbox", id="invalidCheck", required).form-check-input
      label(for="invalidCheck").form-check-label Agree to terms and conditions
      .invalid-feedback You must agree before submitting.
  button(type="submit").btn.btn-primary Submit Form

<!-- Form validation: status tooltips -->
<form class="needs-validation" novalidate>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label class="form-label" for="validationTooltip01">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 class="form-label" for="validationTooltip02">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 class="form-label" for="validationTooltipUsername">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 class="form-label" for="validationTooltip03">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 class="form-label" for="validationTooltip04">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 class="form-label" for="validationTooltip05">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 py-2">
    <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-tooltip">You must agree before submitting.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit Form</button>
</form>

// Form 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-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-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.py-2
    .form-check
      input(type="checkbox", id="invalidCheck", required).form-check-input
      label(for="invalidCheck").form-check-label Agree to terms and conditions
      .invalid-tooltip You must agree before submitting.
  button(type="submit").btn.btn-primary Submit Form

<!-- Format: Credit card number -->
<div class="mb-3">
  <label class="form-label" for="format-card-number">Card number</label>
  <input class="form-control" type="text" id="format-card-number" data-format="card" placeholder="0000 0000 0000 0000">
</div>

<!-- Format: Credit card CVC -->
<div class="mb-3">
  <label class="form-label" for="format-card-cvc">Card CVC</label>
  <input class="form-control" type="text" id="format-card-cvc" data-format="cvc" placeholder="000">
</div>

<!-- Format: Date -->
<div class="mb-3">
  <label class="form-label" for="format-date">Date</label>
  <input class="form-control" type="text" id="format-date" data-format="date" placeholder="mm/yy">
</div>

<!-- Format: Date long -->
<div class="mb-3">
  <label class="form-label" for="format-date-long">Date long</label>
  <input class="form-control" type="text" id="format-date-long" data-format="date-long" placeholder="yyyy-mm-dd">
</div>

<!-- Format: Time -->
<div class="mb-3">
  <label class="form-label" for="format-time">Time</label>
  <input class="form-control" type="text" id="format-time" data-format="time" placeholder="hh:mm:ss">
</div>

<!-- Format: Custom -->
<div class="mb-3">
  <label class="form-label" for="format-custom">Custom format</label>
  <input class="form-control" type="text" id="format-custom" data-format="custom" data-delimiter="-" data-blocks="2 3 4" placeholder="00-000-0000">
</div>

// Format: Credit card number
.mb-3
  label.form-label(for="format-card-number") Card number
  input(type="text", id="format-card-number", data-format="card", placeholder="0000 0000 0000 0000").form-control

// Format: Credit card CVC
.mb-3
  label.form-label(for="format-card-cvc") Card CVC
  input(type="text", id="format-card-cvc", data-format="cvc", placeholder="000").form-control

// Format: Date
.mb-3
  label.form-label(for="format-date").form-label Date
  input(type="text", id="format-date", data-format="date", placeholder="mm/yy").form-control

// Format: Date long
.mb-3
  label.form-label(for="format-date-long") Date long
  input(type="text", id="format-date-long", data-format="date-long", placeholder="yyyy-mm-dd").form-control

// Format: Time
.mb-3
  label.form-label(for="format-time") Time
  input(type="text", id="format-time", data-format="time", placeholder="hh:mm:ss").form-control

// Format: Custom
.mb-3
  label.form-label(for="format-custom") Custom format
  input(type="text", id="format-custom", data-format="custom", data-delimiter="-", data-blocks="2 3 4", placeholder="00-000-0000").form-control

<!-- Light input -->
<label class="form-label text-light" for="text-input-light">Light input</label>
<input class="form-control form-control-light" id="text-input-light" type="text" value="Artisanal kale">

<!-- Light select -->
<label class="form-label text-light" for="select-input-light">Light select</label>
<select class="form-select form-select-light" id="select-input-light">
  <option>Choose option...</option>
  <option>Option item 1</option>
  <option>Option item 2</option>
  <option>Option item 3</option>
</select>

<!-- Light password visibility toggle -->
<label class="form-label" for="pass-visibility">Password</label>
<div class="password-toggle">
  <input class="form-control form-control-light" 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>

<!-- Light textarea -->
<label class="form-label text-light" for="textarea-input-light"> Light textarea</label>
<textarea class="form-control form-control-light" id="textarea-input-light" rows="5">Hello World!</textarea>

<!-- Light checkbox -->
<div class="form-check form-check-light">
  <input class="form-check-input" id="form-check-light-1" type="checkbox">
  <label class="form-check-label" for="form-check-light-1">Default checkbox</label>
</div>

<!-- Light radio -->
<div class="form-check form-check-light">
  <input class="form-check-input" id="form-radio-light-1" type="radio" name="radios-light-stacked">
  <label class="form-check-label" for="form-radio-light-1">Light radio</label>
</div>

<!-- Light switch -->
<div class="form-check form-switch form-switch-light">
  <input class="form-check-input" id="form-switch-lite-1" type="checkbox">
  <label class="form-check-label" for="form-switch-lite-1">Light switch</label>
</div>

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

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

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

// Light textarea
label(for="textarea-input-light").form-label.text-light
  | Light textarea
textarea(id="textarea-input-light", rows="5").form-control.form-control-light Hello World!

// Light checkbox
.form-check.form-check-light
  input(id="form-check-light-1", type="checkbox").form-check-input
  label(for="form-check-light-1").form-check-label
    | Light checkbox

// Light radio
.form-check.form-check-light
  input(id="form-radio-light-1", type="radio", name="radios-light-stacked").form-check-input
  label(for="form-radio-light-1").form-check-label
    | Light radio

// Light switch
.form-check.form-switch.form-switch-light
  input(id="form-switch-lite-1", type="checkbox").form-check-input
  label(for="form-switch-lite-1").form-check-label
    | Light switch