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/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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>

Output:

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

Bootstrap5 Form controls SASS

vkash8574

Improve

Article Tags :

Bootstrap 5 Form controls Datalists

Similar Reads

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Thank You!

What kind of Experience do you want to share?