Elemento <datalist> en HTML5: guía completa con ejemplos prácticos

Ver ejemplo Descargar fuente

El elemento <datalist> introducido en HTML5 permite definir un conjunto de opciones sugeridas para un elemento <input>. En otras palabras, <datalist> ofrece una lista de valores predefinidos a través de elementos <option>, que el navegador muestra como autocompletado mientras el usuario escribe, sin obligarlo a elegir únicamente de esa lista.

¿Te ha pasado que necesitas un campo de texto libre, pero también quieres ofrecer sugerencias… sin llegar a usar un <select> cerrado? Si es así, el elemento <datalist> en HTML5 es exactamente lo que buscabas. Yo lo uso siempre que necesito autocompletar rápido sin recurrir a JavaScript, y la verdad, me ha ahorrado tiempo más de una vez.

En esta guía te explico qué es, cómo funciona, cuándo usarlo y te comparto ejemplos reales que he aplicado en mis propios proyectos.

Anteriormente vimos cómo usar los elementos <area> y <map>.

❓ ¿Qué es el elemento <datalist> en HTML5 y para qué sirve?

El elemento <datalist> sirve para definir una lista de valores sugeridos asociada a un <input>. El usuario puede escribir libremente en el campo, pero también dispone de un menú desplegable que le ayuda a completar el valor más rápido. A diferencia de otros mecanismos de autocompletado, esta funcionalidad es 100% nativa del navegador: sin librerías, sin JavaScript.

En uno de mis artículos anteriores, por ejemplo, mostraba cómo crear un <datalist> con navegadores web para un campo de texto. Esa estructura sigue siendo una de mis favoritas para explicar su funcionamiento, porque es clara y visualmente inmediata.

Diferencia entre <datalist> y <select>

Aunque a primera vista pueden parecer similares, cumplen funciones bien distintas:

• <select> limita al usuario estrictamente a las opciones de la lista; no puede escribir un valor diferente.
• <datalist> solo sugiere opciones, pero permite escribir cualquier otro valor libremente.

Esto es ideal cuando quieres orientar al usuario sin restringirlo. A mí me vino muy bien cuando necesitaba permitir URLs personalizadas, pero quería ofrecer enlaces comunes como referencia rápida.

Cómo funciona la relación <input> + atributo list

El mecanismo es sencillo y se basa en dos pasos:

• El <datalist> debe tener un atributo id único.
• El <input> debe referenciar ese identificador mediante el atributo list="idDelDatalist".

Con esa conexión, el navegador sabe qué lista de sugerencias mostrar al activar el campo.

¿Cómo utilizar <datalist> en conjunto con los inputs? - Ejemplos

Para emplear <datalist> en conjunto con los inputs, debes establecer un identificador en el elemento <datalist> a través del atributo id. Dentro de él, defines las opciones posibles mediante elementos <option>:

     <datalist id="navegadores">
     <option value="Internet Explorer">
     <option value="Firefox">
     <option value="Chrome">
     <option value="Opera">
     <option value="Safari">
     </datalist>

Con el valor del identificador anterior, lo enlazas al <input> a través del atributo list:

<input list="navegadores" type="text">

También puedes añadir un atributo label a los elementos <option> para mostrar un texto alternativo más descriptivo junto al valor:

<datalist id="urls">
	<option value="http://www.google.com" label="Google">
	<option value="http://www.bing.com" label="Bing">
	<option value="http://www.yahoo.com" label="Yahoo">
</datalist>

️ Ejemplo con value + label

Combinar el atributo value con label es una práctica excelente cuando el dato interno (la URL, un código, un ID) difiere del nombre que el usuario debería ver. El navegador muestra el label como texto descriptivo en el desplegable, pero al seleccionar la opción, el campo recibe el value real:

<datalist id="urls">
 <option value="http://www.google.com" label="Google">
 <option value="http://www.bing.com" label="Bing">
 <option value="http://www.yahoo.com" label="Yahoo">
</datalist>
<label>Buscadores:</label>
<input list="urls">

Yo suelo aplicarlo en campos técnicos donde el usuario ve un nombre amigable, pero el valor que se envía al servidor es completamente distinto.

Caso práctico: listas extensas y filtrado automático

Cuando tienes decenas o incluso cientos de opciones, el <datalist> realmente brilla: el navegador filtra las sugerencias en tiempo real mientras el usuario escribe, reduciendo la lista a los resultados relevantes sin ninguna línea de JavaScript de por medio.

Es una solución ultraligera. No requiere dependencias externas y funciona sorprendentemente bien para listas de tamaño mediano, entre 20 y 200 elementos aproximadamente. Para conjuntos de datos muy grandes o con lógica de filtrado compleja, conviene valorar alternativas con JavaScript.

️ Tipos de <input> compatibles con <datalist>

Aunque mucha gente asume que el <datalist> solo funciona con campos de texto, en realidad soporta bastantes más tipos de <input>.

✏️ Texto, búsqueda, email, URL y número

Son los tipos más comunes y el comportamiento es idéntico en todos ellos: el navegador muestra sugerencias de la lista mientras el usuario escribe, pero le permite ingresar cualquier valor libremente. Los ejemplos de type="text" y type="url" ya los viste en las secciones anteriores.

Fechas y horas (date, month, time, datetime-local)

Aquí es donde muchos se sorprenden: <datalist> sí funciona con inputs de fecha y hora, aunque el soporte varía según el navegador. En Chrome, por ejemplo, las opciones sugeridas aparecen como marcas dentro del selector nativo de tiempo.

Puedes sugerir horarios frecuentes, como en este ejemplo:

<input type="time" list="popularHours">
<datalist id="popularHours">
 <option value="12:00">
 <option value="13:00">
 <option value="14:00">
</datalist>

️ Uso avanzado: range y tick marks

Esta es una de las combinaciones menos conocidas y más llamativas: al asociar un <datalist> a un <input type="range">, los valores de las opciones se convierten en marcas de referencia visibles sobre el slider. Es una forma elegante de guiar al usuario hacia valores clave sin restringir el movimiento del control:

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick">
<datalist id="tickmarks">
 <option value="0" label="0%">
 <option value="10" label="Minimum">
 <option value="20" label="Standard">
 <option value="30" label="Generous">
</datalist>

Inputs de color con sugerencias

Combinado con type="color", el <datalist> permite mostrar una paleta de colores predefinida dentro del selector nativo del navegador. Es ideal para cuando quieres limitar la elección a ciertos tonos de marca sin bloquear completamente al usuario:

<input type="color" list="redColors">
<datalist id="redColors">
 <option value="#800000">
 <option value="#A52A2A">
 <option value="#DC143C">
</datalist>

Compatibilidad, limitaciones y advertencias importantes

Quiero ser muy honesto aquí: el <datalist> no es perfecto y tiene aristas que conviene conocer antes de usarlo en producción.

Diferencias entre navegadores

El comportamiento del <datalist> no es uniforme entre navegadores:

• Algunos navegadores muestran únicamente el value en el desplegable.
• Otros muestran tanto el label como el value de forma conjunta.

En Firefox, por ejemplo, el comportamiento puede diferir notablemente del de Chrome o Safari, tanto en la presentación visual como en la interacción con tipos de <input> como date o range. Antes de usarlo en un proyecto, conviene probarlo en los navegadores que usen tus usuarios.

Estilos CSS: lo que NO puedes personalizar

Uno de los puntos más frustrantes del <datalist> es que el menú desplegable de sugerencias está completamente controlado por el navegador. No puedes modificar su apariencia con CSS: ni los colores, ni la tipografía, ni el espaciado. Solo puedes estilizar el <input> al que está asociado. Si el diseño personalizado es un requisito, tendrás que recurrir a una solución JavaScript.

Problemas comunes y cómo resolverlos

Estos son los problemas que he encontrado con más frecuencia:

• En niveles de zoom elevados, el texto de las opciones no escala correctamente en algunos navegadores.
• Ciertos lectores de pantalla no anuncian las opciones del <datalist>, lo que lo convierte en una barrera para usuarios con discapacidad visual.
• En dispositivos móviles, la experiencia puede ser inconsistente: en algunos casos el teclado virtual interfiere con el menú de sugerencias o directamente no aparece.

♿ Accesibilidad del elemento <datalist>

La accesibilidad es el talón de Aquiles del <datalist>:

• Algunos lectores de pantalla no leen las sugerencias del desplegable.
• La lista no siempre respeta el tamaño de fuente accesible configurado por el usuario.
• No existe un rol ARIA específico para el elemento, lo que dificulta describir su comportamiento a tecnologías de asistencia.

Recomendación personal: cuando la accesibilidad es una prioridad real, es mejor optar por un <select> tradicional o implementar un autocompletado con JavaScript correctamente etiquetado con atributos aria-*.

¿Cuándo conviene usar <datalist> y cuándo evitarlo?

Escenarios ideales

• Formularios sencillos donde las sugerencias son orientativas, no restrictivas.
• Listas de tamaño mediano (entre 20 y 200 elementos aproximadamente).
• Cuando necesitas permitir valores libres que no estén en la lista predefinida.
• Cuando quieres autocompletar sin cargar librerías JavaScript adicionales.

Personalmente lo uso bastante en paneles internos y formularios técnicos, donde el público conoce el dominio y las sugerencias aceleran la entrada de datos.

Cuándo evitarlo

• Cuando necesitas un diseño personalizado del desplegable (colores, fuentes, iconos, etc.).
• Cuando la accesibilidad estricta es un requisito del proyecto.
• Cuando la lista es dinámica y depende de filtros o consultas complejas a una API.
• Cuando los usuarios móviles son tu audiencia principal, dado el soporte inconsistente en esos dispositivos.

Ejemplos completos (HTML + JS opcional)

A continuación, una serie de ejemplos que complementan lo explicado en las secciones anteriores.

<datalist> solo con HTML

El caso más básico y más habitual: un campo de texto con una lista de navegadores como sugerencias.

<label for="browser">Elige un navegador:</label>
<input list="browsers" id="browser">
<datalist id="browsers">
 <option value="Chrome">
 <option value="Firefox">
 <option value="Safari">
 <option value="Opera">
</datalist>

⚙️ <datalist> con JavaScript para mostrar la selección

Aunque el <datalist> no requiere JavaScript, puedes combinarlo fácilmente para reaccionar al valor seleccionado. En este ejemplo, un botón lee el valor actual del <input> y lo muestra en pantalla usando document.getElementById():

<form>
 <label>Your Car's Name:</label>
 <input list="cars" id="carsInput">
 <datalist id="cars">
   <option value="BMW">
   <option value="Bentley">
   <option value="Mercedes">
   <option value="Audi">
   <option value="Volkswagen">
 </datalist>
  <button type="button" onclick="datalistcall()">Click Here</button>
</form>

<p id="output"></p>

<script>
function datalistcall() {
 const value = document.getElementById("carsInput").value;
 document.getElementById("output").textContent =
   "You selected: " + value;
}
</script>

Ejemplo de formulario completo con múltiples tipos

Este ejemplo combina un <input type="email"> con sugerencias de correo y un <input type="color"> con una paleta predefinida, mostrando cómo el <datalist> se adapta a distintos tipos de campo dentro de un mismo formulario:

<form>
 <label>Correo sugerido:</label>
 <input type="email" list="emails">
 <datalist id="emails">
   <option value="contacto@empresa.com">
   <option value="info@empresa.com">
   <option value="soporte@empresa.com">
 </datalist>
 <label>Color preferido:</label>
 <input type="color" list="colors">
 <datalist id="colors">
   <option value="#FF0000">
   <option value="#00FF00">
   <option value="#0000FF">
 </datalist>
</form>

❓ Preguntas frecuentes sobre <datalist> en HTML5

• ¿El usuario puede escribir valores que no estén en la lista?
  • Sí. El <datalist> solo sugiere; el campo sigue siendo un <input> libre.
• ¿Puedo estilizar las opciones del desplegable?
  • No. Solo puedes aplicar estilos al <input> asociado; el menú es controlado por el navegador.
• ¿Funciona en todos los navegadores modernos?
  • Sí, aunque con variaciones notables en el comportamiento visual y en tipos de <input> como date, range o color.
• ¿Es una alternativa a <select>?
  • No exactamente. Son elementos distintos: <select> restringe la selección a la lista; <datalist> la sugiere sin obligar.
• ¿Necesito JavaScript para que funcione?
  • No. El <datalist> funciona completamente sin JS; es funcionalidad nativa de HTML5.

Ver ejemplo Descargar fuente

Siguiente paso, aprende a incrustar de manera nativa vídeos y audios en HTML.