Forms

Form control styles, layout options, and custom components.

Bootstrap docs

Supported input types

<!-- Text input -->
<div class="mb-4">
  <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-4">
  <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-4">
  <label for="email-input" class="form-label">Email</label>
  <input class="form-control" type="email" id="email-input" value="[email protected]">
</div>

<!-- URL Input -->
<div class="mb-4">
  <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-4">
  <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-4">
  <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-4">
  <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-4">
  <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-4">
  <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-4">
  <label for="file-input" class="form-label">File</label>
  <input class="form-control" type="file" id="file-input">
</div>

<!-- Number input -->
<div class="mb-4">
  <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-4">
  <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-4">
  <label for="range-input" class="form-label">Range</label>
  <input class="form-control" type="range" id="range-input">
</div>

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

Floating labels

<!-- Floating label: Text input -->
<div class="form-floating mb-4">
  <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-4">
  <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>

Password visibility toggle

<!-- Password visibility toggle -->
<div class="mb-4">
  <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>

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>

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>

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 Alternative

<!-- Switch Alt -->
<div class="switch">
  <input class="switch-input visually-hidden" type="checkbox" id="switchAlt">
  <label class="switch-label" for="switchAlt">
    <span class="switch-label-item">Monthly</span>
    <span class="switch-label-item">Yearly
      <small class="ms-2 fs-xs fw-normal">-12% Off</small>
    </span>
  </label>
</div>

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 ci-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-outline-primary btn-sm">Or select file</button>
</div>

Size / color options

Choose size
Choose color - Blue
<!-- Default size option -->
<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>

<!-- Small size option -->
<div class="form-check form-option form-option-sm form-option-size form-check-inline mb-2">
  <input type="radio" class="form-check-input" id="l-sm" name="size-sm" checked>
  <label for="l-sm" class="form-option-label">L</label>
</div>

<!-- Selected color (status) -->
<div class="fs-sm mb-3">
  <span class="fw-bold text-heading">Choose color - </span>
  <span class="ms-1" id="colorOptionText">Blue</span>
</div>

<!-- Default color option -->
<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">
  <label class="form-option-label rounded-circle" for="blue">
    <span class="form-option-color-indicator rounded-circle" style="background-color: #6a9bf4;"></span>
  </label>
  <label class="form-option-color-text" for="blue">Blue</label>
</div>

<!-- Small color option -->
<div class="form-check form-option form-option-sm form-option-color form-check-inline mb-2">
  <input class="form-check-input" type="radio" name="color-sm" id="orange-sm" value="Orange" data-label="colorOptionText">
  <label class="form-option-label rounded-circle" for="orange-sm">
    <span class="form-option-color-indicator rounded-circle" style="background-color: #ff9d50;"></span>
  </label>
</div>

Button control

<!-- Button control (checkbox button) -->
<div class="btn-control form-check-inline">
  <input type="checkbox" class="btn-control-input" id="btn-control-1" checked>
  <label for="btn-control-1" class="btn-control-label">Women</label>
</div>

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>

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>

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>

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>

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>

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>

Light version

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

<!-- Light select -->
<div class="mb-4">
  <label for="select-input" class="form-label text-white">Select</label>
  <select id="select-input" class="form-control custom-select input-light">
    <option>Choose option</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
  </select>
</div>

<!-- Light textarea -->
<div class="mb-4">
  <label for="textarea-input" class="form-label text-white">Textarea</label>
  <textarea id="textarea-input" class="form-control input-light" rows="3">Hello World!</textarea>
</div>
Top