Around Buy now

Forms

Form control styles, layout options, and custom components.

Bootstrap docs

Supported input types

<!-- 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="#35cfe3">
</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="#35cfe3").form-control.form-control-color

Floating labels

<!-- 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

<!-- 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

Checkboxes

<!-- 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

Radio buttons

<!-- 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

Switches

<!-- 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="customSwitch1", checked).form-check-input
  label.form-check-label(for="customSwitch2") Toggle this switch element

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

Drag & drop file upload

Drag and drop here to upload 
<!-- Drag and drop file upload -->
<div class="file-drop-area">
  <div class="file-drop-icon ai-upload"></div>
  <span class="file-drop-message">Drag and drop here to upload</span>
  <input type="file" class="file-drop-input">
  <button type="button" class="file-drop-btn btn btn-translucent-primary btn-sm">Or select file</button>
</div>
// Drag and drop file upload
.file-drop-area
  .file-drop-icon.ai-upload
  span.file-drop-message Drag and drop here to upload
  input(type="file").file-drop-input
  button(type="button").file-drop-btn.btn.btn-translucent-primary.btn-sm
    | Or select file

Size / color options

Choose size
Choose color - Blue
<!-- Size options (radio buttons) -->
<div class="form-check form-option form-option-size form-check-inline mb-2">
  <input type="radio" class="form-check-input" id="xl" name="size" checked>
  <label for="xl" class="form-option-label">XL</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
  <input type="radio" class="form-check-input" id="l" name="size" checked>
  <label for="l" class="form-option-label">L</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
  <input type="radio" class="form-check-input" id="m" name="size" checked>
  <label for="m" class="form-option-label">M</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
  <input type="radio" class="form-check-input" id="s" name="size" checked>
  <label for="s" class="form-option-label">S</label>
</div>
<div class="form-check form-option form-option-size form-check-inline mb-2">
  <input type="radio" class="form-check-input" id="xs" name="size" checked>
  <label for="xs" class="form-option-label">XS</label>
</div>

<!-- Color options (radio buttons) -->
<div class="fs-sm mb-2">
  <span class="fw-medium text-heading">Choose color - </span>
  <span class="ms-1" id="colorOptionText">Blue</span>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
  <input class="form-check-input" type="radio" name="color" id="blue" value="Blue" data-label="colorOptionText" checked>
  <label class="form-option-label rounded-circle" for="blue">
    <span class="form-option-color rounded-circle" style="background-color: #6a9bf4;"></span>
  </label>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
  <input class="form-check-input" type="radio" name="color" id="yellow" value="Yellow" data-label="colorOptionText">
  <label class="form-option-label rounded-circle" for="yellow">
    <span class="form-option-color rounded-circle" style="background-color: #ff9d50;"></span>
  </label>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
  <input class="form-check-input" type="radio" name="color" id="green" value="Green" data-label="colorOptionText">
  <label class="form-option-label rounded-circle" for="green">
    <span class="form-option-color rounded-circle" style="background-color: #16c995;"></span>
  </label>
</div>
<div class="form-check form-option form-option-color form-check-inline mb-2">
  <input class="form-check-input" type="radio" name="color" id="pink" value="Pink" data-label="colorOptionText">
  <label class="form-option-label rounded-circle" for="pink">
    <span class="form-option-color rounded-circle" style="background-color: #f74f78;"></span>
  </label>
</div>
// Size options (radio buttons)
.form-check.form-option.form-option-size.form-check-inline.mb-2
  input(type="radio", name="size", id="xl" checked).form-check-input
  label.form-option-label(for="xl") XL
.form-check.form-option.form-option-size.form-check-inline.mb-2
  input(type="radio", name="size", id="l").form-check-input
  label.form-option-label(for="l") L
.form-check.form-option.form-option-size.form-check-inline.mb-2
  input(type="radio", name="size", id="m").form-check-input
  label.form-option-label(for="m") M
.form-check.form-option.form-option-size.form-check-inline.mb-2
  input(type="radio", name="size", id="s").form-check-input
  label.form-option-label(for="s") S
.form-check.form-option.form-option-size.form-check-inline.mb-2
  input(type="radio", name="size", id="xs").form-check-input
  label.form-option-label(for="xs") XS

// Color options (radio buttons)
.fs-sm.mb-2
  span.fw-medium.text-heading
    | Choose color - 
  span#colorOptionText.ms-1
    | Blue
.form-check.form-option.form-option-color.form-check-inline.mb-2
  input(type="radio", name="color", id="blue", value="Blue", data-label="colorOptionText", checked).form-check-input
  label(for="blue").form-option-label.rounded-circle
    span(style="background-color: #6a9bf4;").form-option-color.rounded-circle
.form-check.form-option.form-option-color.form-check-inline.mb-2
  input(type="radio", name="color", id="yellow", value="Yellow", data-label="colorOptionText").form-check-input
  label(for="yellow").form-option-label.rounded-circle
    span(style="background-color: #ff9d50;").form-option-color.rounded-circle
.form-check.form-option.form-option-color.form-check-inline.mb-2
  input(type="radio", name="color", id="green", value="Green", data-label="colorOptionText").form-check-input
  label(for="green").form-option-label.rounded-circle
    span(style="background-color: #16c995;").form-option-color.rounded-circle
.form-check.form-option.form-option-color.form-check-inline.mb-2
  input(type="radio", name="color", id="pink", value="Pink", data-label="colorOptionText").form-check-input
  label(for="pink").form-option-label.rounded-circle
    span(style="background-color: #f74f78;").form-option-color.rounded-circle

Sizing

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

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

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

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

Readonly & disabled

<!-- 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

Help text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<!-- 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.

Validation: status text

Looks good!
Looks good!
Please choose a username.
Looks good!
Please provide a valid city.
Looks good!
Please provide a valid state.
Looks good!
Please provide a valid zip.
Looks good!
You must agree before submitting.
<!-- 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

Validation: status tooltips

Looks good!
Looks good!
Please choose a username.
Looks good!
Please provide a valid city.
Looks good!
Please provide a valid state.
Looks good!
Please provide a valid zip.
Looks good!
You must agree before submitting.
<!-- 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 input text content

<!-- 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
Top