Bootstrap 5 Form controls Datalists

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. It was officially released on 16 June 2020 after several months of redefining its features.

Bootstrap 5 Form controls datalists are used to create a group of options (group of <option> elements) that can be accessed by using an input element. It is similar to the <select> element but the difference is that it has more menu styling limitations and differences.

Datalist used Tags:

• <input>: It is used to create an input field.
• <datalist>: It is used to provide autocomplete feature in the HTML files. 
• <option>: It is used to choose an option from a Drop-Down menu.

 

Syntax:

<label for="datalist" class="form-label">
 Datalist Label
</label>
<input class="form-control" list="gfglist" 
 id="datalist" placeholder="search...">
<datalist id="gfglist">
 <option value="...">
 ...
</datalist>

Example 1: In this example, we will create a datalist with a group of options.

Output:

👁 Image

Example 2: In this example, we will create a datalist with a group of color options.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#datalists