Playground de datalist en HTML

Explora datalist como una lista de valores sugeridos para un input. Cambia el tipo de control, configura atributos y compara menús, marcas de rango y selectores nativos sin restringir el valor a las opciones disponibles.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Contenido

Etiqueta accesible

La etiqueta se asocia al input mediante for e id. datalist aporta sugerencias, pero no sustituye el nombre accesible del control.

Input asociado

Tipo de input

datalist funciona con varios tipos de input, pero la interfaz y el soporte exactos varían según el navegador. No sustituye a select: el usuario puede introducir otros valores válidos.

placeholder

placeholder solo se genera para tipos de input compatibles, como text, search, email, url, tel y number.

value

value establece el valor inicial. Debe usar el formato esperado por el tipo de input seleccionado.

Exigir un valor

required obliga a completar el input, pero no exige que el valor coincida con una sugerencia de datalist.

Desactivar autocomplete del navegador

autocomplete="off" ayuda a separar las sugerencias de datalist del historial de autocompletado del navegador, aunque cada navegador decide su comportamiento final.

Límites del input

min

min se aplica a tipos numéricos, temporales y range. Usa un valor compatible con el tipo seleccionado.

max

max se aplica a tipos numéricos, temporales y range. Usa un valor compatible con el tipo seleccionado.

step

step define el incremento permitido en tipos numéricos, temporales y range.

Opciones del datalist

Sugerencias

Escribe una sugerencia por línea. Usa valor | etiqueta para añadir texto descriptivo opcional.

input type="text"

Tecnología preferida

Escribe en el campo o abre sus sugerencias nativas. Los valores fuera de la lista siguen permitidos.

Valor actual Sin valor

Sugerencias configuradas

HTMLLenguaje de marcado
CSSHojas de estilo
JavaScriptLenguaje de programación
TypeScriptJavaScript con tipos

HTML

<label for="preferred-technology">Tecnología preferida</label>
<input
  type="text"
  id="preferred-technology"
  name="suggested-value"
  list="technology-suggestions"
  placeholder="Escribe o elige una tecnología"
  autocomplete="off"
/>

<datalist id="technology-suggestions">
  <option value="HTML" label="Lenguaje de marcado"></option>
  <option value="CSS" label="Hojas de estilo"></option>
  <option value="JavaScript" label="Lenguaje de programación"></option>
  <option value="TypeScript" label="JavaScript con tipos"></option>
</datalist>