Bootstrap 5 Form controls Datalists

Last Updated : 23 Nov, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap5 Form controls Datalists</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap5 Form controls Datalists</h2> 
  
        <label for="GFGDataList" class="form-label"> 
            Datalist 
        </label> 
          
        <input class="form-control" 
            list="GFGOptions" id="GFGDataList" 
            placeholder="Select option"> 
        <datalist id="GFGOptions"> 
            <option value="HTML"> 
            <option value="CSS"> 
            <option value="JavaScript"> 
            <option value="Bootstrap"> 
        </datalist> 
    </div> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap5 Form controls Datalists</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap5 Form controls Datalists</h2> 
  
        <label for="GFG_Color" class="form-label"> 
            Select Color 
        </label> 
        <input type="color" class="form-control" 
            list="colors" id="GFG_Color" 
            placeholder="Select Color"> 
        <datalist id="colors"> 
            <option value="#ff0000"></option> 
            <option value="#006600"></option> 
            <option value="#0000ff"></option> 
            <option value="#cc0099"></option> 
        </datalist> 
    </div> 
</body> 
  
</html>