Forms

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

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

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

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

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

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

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

<!-- Select -->
<div class="form-group">
  <label for="select-input">Select</label>
  <select class="form-control custom-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="form-group">
  <label for="multiselect-input">Multiselect</label>
  <select class="form-control" 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="form-group">
  <label for="file-input">File</label>
  <div class="custom-file">
    <input class="custom-file-input" type="file" id="file-input">
    <label class="custom-file-label" for="file-input">Choose file...</label>
  </div>
</div>

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

<!-- Date time input -->
<div class="form-group">
  <label for="date-time-input">Date and time</label>
  <input class="form-control" type="datetime-local" id="date-time-input">
</div>

<!-- Date input -->
<div class="form-group">
  <label for="date-input">Date</label>
  <input class="form-control" type="date" id="date-input" value="2018-06-13">
</div>

<!-- Month input -->
<div class="form-group">
  <label for="month-input">Month</label>
  <input class="form-control" type="month" id="month-input" value="2018-06">
</div>

<!-- Week input -->
<div class="form-group">
  <label for="week-input">Week</label>
  <input class="form-control" type="week" id="week-input" value="2018-W33">
</div>

<!-- Time input -->
<div class="form-group">
  <label for="time-input">Time</label>
  <input class="form-control" type="time" id="time-input" value="14:45:00">
</div>

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

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

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

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

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

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

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

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

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

// Multiselect
.form-group
  label(for="multiselect-input") Multiselect
  select(id="multiselect-input", size="3", multiple).form-control
    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
.form-group
  label(for="file-input") File
  .custom-file
    input(type="file", id="file-input").custom-file-input
    label.custom-file-label(for="file-input") Choose file...

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

// Date time input
.form-group
  label(for="date-time-input") Date and time
  input(type="datetime-local", id="date-time-input").form-control

// Date input
.form-group
  label(for="date-input") Date
  input(type="date", id="date-input", value="2017-06-13").form-control

// Month input
.form-group
  label(for="month-input") Month
  input(type="month", id="month-input", value="2017-06").form-control

// Week input
.form-group
  label(for="week-input") Week
  input(type="week", id="week-input", value="2017-W33").form-control

// Time input
.form-group
  label(for="time-input") Time
  input(type="time", id="time-input", value="14:45:00").form-control

// Color input
.form-group
  label(for="color-input") Color
  input(type="color", id="color-input", value="#f5f5f5").form-control

<!-- Password visibility toggle -->
<div class="form-group">
  <label for="pass-visibility" class="form-label">Password</label>
  <div class="cs-password-toggle">
    <input type="password" id="pass-visibility" class="form-control" value="hidden@password">
    <label class="cs-password-toggle-btn">
      <input type="checkbox" class="custom-control-input">
      <i class="fe-eye cs-password-toggle-indicator"></i>
      <span class="sr-only">Show password</span>
    </label>
  </div>
</div>

// Password visibility toggle
.form-group
  label(for="pass-visibility").form-label Password
  .cs-password-toggle
    input(type="password", id="pass-visibility", value="hidden@password").form-control
    label.cs-password-toggle-btn
      input(type="checkbox").custom-control-input
      i.fe-eye.cs-password-toggle-indicator
      span.sr-only Show password

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

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

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

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

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

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

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

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

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

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

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

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

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

// Disabled switch
.custom-control.custom-switch
  input(type="checkbox", id="customSwitch1", disabled).custom-control-input
  label.custom-control-label(for="customSwitch3") Disabled switch element

<!-- Large input -->
<div class="form-group">
  <label for="large-input" class="form-label-lg">Large input</label>
  <input class="form-control form-control-lg" type="text" id="large-input" placeholder="Large input placeholder">
</div>

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

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

// Large input
.form-group
  label.form-label-lg(for="large-input") Large input
  input(type="text", id="large-input", placeholder="Large input placeholder").form-control.form-control-lg

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

// Small input
.form-group
  label.form-label-sm(for="small-input") Small input
  input(type="text", id="small-input", placeholder="Small input placeholder").form-control.form-control-sm

<!-- 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-control custom-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-control.custom-select
  option Disabled select here...
  option Option item 1
  option Option item 2
  option Option item 3

<!-- Inline form -->
<form class="form-inline">
  <label class="sr-only">Name</label>
  <input class="form-control mb-3 mr-sm-4" type="text" placeholder="John Doe">
  <label class="sr-only">Username</label>
  <div class="input-group mb-3 mr-sm-4">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input class="form-control" type="text" placeholder="Username">
  </div>
  <div class="custom-control custom-checkbox mb-3 mr-4">
    <input class="custom-control-input" type="checkbox" id="inline-form-check-1">
    <label class="custom-control-label" for="inline-form-check-1">Remember me</label>
  </div>
  <button class="btn btn-primary mb-3" type="submit">Submit</button>
</form>

// Inline form
form.form-inline.pt-2
  label.sr-only(for="inline-form-input-name") Name
  input(type="text", id="inline-form-input-name", placeholder="John Doe").form-control.mb-3.mr-sm-4
  label.sr-only(for="inline-form-input-username") Username
  .input-group.mb-3.mr-sm-4
    .input-group-prepend
      .input-group-text @
    input(type="text", id="inline-form-input-username", placeholder="Username").form-control
  .custom-control.custom-checkbox.mb-3.mr-4
    input(type="checkbox", id="inline-form-check-1").custom-control-input
    label.custom-control-label(for="inline-form-check-1") Remember me
  button.btn.btn-primary.mb-3(type='submit') Submit

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

// Form help text
.form-group
  label.form-label(for="help-text-input") Password
  input(type="password", id="help-text-input", placeholder="Your password here").form-control
  small.form-text.text-muted
    | 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 form-group">
      <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 form-group">
      <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 form-group">
      <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 form-group">
      <label for="validationCustom03" class="form-label">City</label>
      <select class="form-control custom-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 form-group">
      <label for="validationCustom04" class="form-label">State</label>
      <select class="form-control custom-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 form-group">
      <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="form-group">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="invalidCheck" required>
      <label class="custom-control-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.form-group
      label.form-label(for="validationCustom01") First name
      input(type="text", id="validationCustom01", placeholder="First name", value="John", required).form-control
      .valid-feedback
        | Looks good!
    .col-md-4.form-group
      label.form-label(for="validationCustom02") Last name
      input(type="text", id="validationCustom02", placeholder="Last name", value="Doe", required).form-control
      .valid-feedback
        | Looks good!
    .col-md-4.form-group
      label.form-label(for="validationCustomUsername") 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.form-group
      label.form-label(for="validationCustom03") City
      select(id="validationCustom03" 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-feedback
        | Please provide a valid city.
      .valid-feedback
        | Looks good!
    .col-md-3.form-group
      label.form-label(for="validationCustom04") State
      select(id="validationCustom04" 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-feedback
        | Please provide a valid state.
      .valid-feedback
        | Looks good!
    .col-md-3.form-group
      label.form-label(for="validationCustom05") Zip
      input(type="text", id="validationCustom05", placeholder="Zip", required).form-control
      .invalid-feedback
        | Please provide a valid zip.
      .valid-feedback
        | Looks good!
  .form-group
    .custom-control.custom-checkbox
      input(type="checkbox" id="invalidCheck" required).custom-control-input
      label.custom-control-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 form-group">
      <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 form-group">
      <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 form-group">
      <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 form-group">
      <label for="validationTooltip03" class="form-label">City</label>
      <select class="form-control custom-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 form-group">
      <label for="validationTooltip04" class="form-label">State</label>
      <select class="form-control custom-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 form-group">
      <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="form-group">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="invalidCheck01" required>
      <label class="custom-control-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.form-group
      label.form-label(for="validationTooltip01") First name
      input(type="text" id="validationTooltip01" placeholder="First name" value="John" required).form-control
      .valid-tooltip
        | Looks good!
    .col-md-4.form-group
      label.form-label(for="validationTooltip02") Last name
      input(type="text" id="validationTooltip02" placeholder="Last name" value="Doe" required).form-control
      .valid-tooltip
        | Looks good!
    .col-md-4.form-group
      label.form-label(for="validationTooltipUsername") 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.form-group
      label.form-label(for="validationTooltip03") 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.form-group
      label.form-label(for="validationTooltip04") 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.form-group
      label.form-label(for="validationTooltip05") Zip
      input(type="text" id="validationTooltip05" placeholder="Zip" required).form-control
      .invalid-tooltip
        | Please provide a valid zip.
      .valid-tooltip
        | Looks good!
  .form-group
    .custom-control.custom-checkbox
      input(type="checkbox" id="invalidCheck01" required).custom-control-input
      label(for="invalidCheck01").custom-control-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="form-group">
  <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="form-group">
  <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="form-group">
  <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="form-group">
  <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="form-group">
  <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="form-group">
  <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
.form-group
  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
.form-group
  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
.form-group
  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
.form-group
  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
.form-group
  label.form-label(for="format-time") Time
  input(type="text", id="format-time", data-format="time", placeholder="hh:mm:ss").form-control

// Format: Custom
.form-group
  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