Skip to main content Accessibility Feedback

JavaScript-Free Components


Create a label and input like you normally would. Then create a datalist element, and add an option element for each autocomplete choice.

Give the datalist an ID. Add the list property to your input with a value equal to your datalist ID.

<label for="states">Who's the best wizard?</label>
<input type="text" id="wizards" name="wizards" list="wizards-list">
<datalist id="wizards-list">
	<option>Harry Potter</option>

Autocomplete Demo →

Join the Lean Web Club! Coaching. Courses. Coding resources. Get the skills, confidence, and support you need to learn front-end web development and achieve long-term success.

Find this useful? You can support my work by purchasing an annual membership.