Creating Selectable Input with Datalist

A selectable input is the way my brain likes to think of it. You could also think of it as a list of predefined options for the input element. Or you could think of it as a recommended list of options. Whichever way you prefer to think about it, it serves a great purpose.

You start off by creating a basic form as you normally would.

<form>
  <label for="food-choice">Make a food selection</label>
  <input id="food-choice" name="food-choice" type="text" placeholder="Food selection">
</form>

Now, we can give the input element a “list”. Which will tell the input element that we want to select an element from the list we give it. Then, we must define that list. The way we do that is with the datalist element which includes different options. So, if we build on what we were doing before, we have this.

<form>
  <label for="food-choice">Make a food selection</label>
  <input id="food-choice" name="food-choice" list="food-list" type="text" placeholder="Food selection">
  <datalist id="food-list">
    <option value="Pizza">
    <option value="Pasta">
    <option value="Chicken">
  </datalist>
</form>

We link the input element to the datalist by giving the datalist an id that matches the list attribute for the input element. Here it is in action.

See the Pen Selectable Input by Alyssa DiCarlo (@alyssadicarlo) on CodePen.