<label for="select-choice" class="block font-bold mr-4">Select from the list:</label>
<input list="select-options" id="select-choice" name="select-choice" class="p-2 rounded bg-theme-primary/40 text-theme-text" />
<datalist id="select-options">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
<option value="Option 4">
<option value="Option 5">
</datalist>The <datalist> Element
The <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
When to use it
Use the <datalist> element to provide an 'autocomplete' feature on <input> elements. It provides a list of predefined options to the user as they type, which is a great user experience for forms with many possible values.
The user can select from the suggestions, or type in their own value if it's not on the list. It's more flexible than a <select> element in that way.