Datalists

A new form element that has been is introduced in Bootstrap 5.
Datalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>.

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

Switch Checkboxes

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch.

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

Floating Labels

Default

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

For Validation

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

label`.form-label`
div`.input-group`
  span`.input-group-text`
  input`.form-control`
  span`.input-group-text`

Checkbox & Radio Input Groups

div`.input-group`
  div`.input-group-text`
    input`.form-check-input`
  input`.form-control`

Sizes

input-group-sm
input-group
input-group-lg