HTML Datalist

Imagine giving users a helpful nudge — a list of suggestions they can pick from — while still letting them type their own answer. That’s exactly what <datalist> offers: a bridge between control and freedom.

<datalist> is an HTML element that provides a set of pre-defined options to an <input>. As users type, matching suggestions appear, but they’re not locked into the list — they can type anything they want.

<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

[ A ▼ ] — Suggestions: Apple, Banana, Cherry

When the user starts typing, options from the list appear as suggestions. It’s smart, flexible, and works beautifully for search bars, forms, and custom inputs.

The list attribute on the input field must match the id of the <datalist> element.

<input type="text" list="items" name="itemName">
<datalist id="items">
  <option value="Item 1">
  <option value="Item 2">
  <option value="Item 3">
</datalist>

This setup enables autocomplete-style interaction without enforcing the choices.

You can add as many <option> values as needed — even dynamically via JavaScript in advanced use cases (though that goes beyond HTML).

Pair placeholder with datalist for a more guided UX.

<input type="text" name="fruitName" list="fruitList" placeholder="Choose or type a fruit">
<datalist id="fruitList">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

[ Choose or type a fruit ▼ ]

<form action="/submit-fruit" method="post">

  <label for="fruit">Your favorite fruit:</label><br>
  <input type="text" id="fruit" name="fruit" list="fruitOptions" placeholder="Apple, Banana, etc." required>
  
  <datalist id="fruitOptions">
    <option value="Apple">
    <option value="Banana">
    <option value="Cherry">
    <option value="Mango">
    <option value="Pineapple">
  </datalist><br><br>

  <input type="submit" value="Submit">
</form>

Your favorite fruit: [ type or pick ▼ ]  
[Submit]

This form gently suggests a few fruits but still respects the user’s freedom to enter something unique — like "Blueberry".

<datalist> is supported in all major browsers except Safari on iOS (which may ignore the suggestion dropdown but still allows typed values).

• Use when there’s a long list of common answers (e.g., cities, tags, categories)
• Don’t rely on datalist for strict validation — users can enter anything
• Combine with required if the field must be filled
• Use helpful placeholders to guide users on what to expect

The <datalist> element gives you the best of both worlds: suggested options and open input. You’ve now learned to:

• Create a datalist element and connect it to an input
• Offer relevant suggestions without limiting user input
• Enhance form usability and speed without JavaScript

Choose the option that lists all and only the correct statements.

1. Suggesting cities for 'Place of Birth'
2. Providing subject options for elective selection
3. Allowing multi-select of sports activities
4. Listing blood groups for student health info

Choose the option that lists all and only the correct statements.

1. <input list="cities">
   <datalist id="cities">
     <option value="Hyderabad">
     <option value="Chennai">
   </datalist>

2. <input list="subjects">
   <list id="subjects">
     <option value="Maths">
   </list>

3. <input type="text">
   <datalist>
     <option value="English">
   </datalist>

4. <input list="bloodGroups">
   <datalist id="bloodGroups">
     <option value="B+">
     <option value="O-">
   </datalist>

Up next: we explore the autofocus and autocomplete attributes — making your forms more intuitive from the moment the page loads.