<select>, <option>

<select> es el control de formulario para elegir una opción de una lista predefinida. Renderiza como un menú desplegable (dropdown): el usuario ve el valor actualmente seleccionado, hace clic para desplegar la lista completa, y elige una opción. Es el control correcto cuando el conjunto de opciones es fijo y conocido de antemano, la lista no es demasiado larga para leer, y se quiere ahorrar espacio en pantalla respecto a mostrar todos los radio buttons.

Dentro de <select> viven los elementos <option>, uno por cada opción disponible. Cada <option> tiene dos partes: el atributo value (lo que se envía al servidor como dato) y el texto entre las etiquetas (lo que el usuario ve en el dropdown). Esta distinción es fundamental y es la fuente del error más frecuente: si un <option> no tiene value, el navegador envía el texto visible tal como está — con tildes, mayúsculas y espacios — lo que puede causar inconsistencias en el backend.

<select> y sus opciones son rendered elements: el navegador dibuja el widget nativo del sistema operativo, igual que con <input>. Esto significa que el dropdown se ve diferente en Windows, macOS, Android e iOS. El CSS puede cambiar el borde, el fondo y el tamaño del <select> exterior, pero el menú desplegado en sí usa el estilo nativo. Para dropdowns con diseño completamente personalizado se usan componentes JavaScript, pero <select> nativo es la opción más accesible y de mejor rendimiento para la mayoría de los casos.

Cómo funciona

Al enviarse el formulario, <select> envía el par name=value donde value es el atributo value de la opción seleccionada. Si la opción no tiene atributo value, se envía el texto visible. Con multiple, se pueden enviar varios pares con el mismo nombre (o se envía como array, dependiendo del servidor).

Modelo de contenido

<select> acepta <option>, <optgroup>, y <hr> (como separador visual). <option> acepta solo texto. Display por defecto: inline-block.

Sintaxis

<label for="pais">País</label>
<select id="pais" name="pais">
  <option value="">-- Seleccioná un país --</option>
  <option value="argentina">Argentina</option>
  <option value="chile">Chile</option>
  <option value="mexico">México</option>
</select>

Atributos de <select>

name — clave de envío

La clave del par nombre=valor en la petición HTTP. Obligatorio para que el dato se incluya en el envío.

multiple — selección múltiple

Atributo booleano. Convierte el dropdown en una lista de selección múltiple donde el usuario puede elegir varias opciones (Ctrl/Cmd + clic, o Shift + clic para rango).

<select name="habilidades" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Gotcha: con multiple, el widget ya no es un dropdown — es una lista de opciones visible. El size controla cuántas opciones se ven a la vez.

size — líneas visibles

Define cuántas opciones se muestran sin necesidad de hacer scroll. Solo relevante cuando multiple está presente o cuando se quiere mostrar varias opciones a la vez.

Default: 1 (muestra solo la opción seleccionada en modo dropdown).

required — campo obligatorio

El formulario no se envía si ninguna opción con valor no vacío está seleccionada. Para que funcione con una opción placeholder, esa opción debe tener value="".

<select name="pais" required>
  <option value="">-- Seleccioná --</option>
  <option value="ar">Argentina</option>
</select>

disabled — deshabilitado

El control no es interactivo y su valor no se envía.

autocomplete — autocompletar

Controla si el navegador puede preseleccionar la opción basándose en datos guardados.

Atributos de <option>

value — dato enviado al servidor

Lo que se envía como valor cuando esta opción está seleccionada. Si se omite, se envía el texto visible (con tildes, mayúsculas y todo). Siempre definir value explícitamente.

<!-- ❌ MAL: se envía "Argentina" con mayúscula -->
<option>Argentina</option>

<!-- ✅ BIEN: se envía "argentina" controlado -->
<option value="argentina">Argentina</option>

selected — opción seleccionada por defecto

Atributo booleano. Marca la opción como seleccionada al cargar la página.

<option value="chile" selected>Chile</option>

Default: la primera opción de la lista está seleccionada si ninguna tiene selected.

disabled — opción no seleccionable

Muestra la opción en la lista pero no permite seleccionarla. Útil para cabeceras de grupo cuando no se usa <optgroup>.

<option value="" disabled>-- Seleccioná --</option>

<optgroup> — grupos de opciones

<optgroup> agrupa opciones visualmente con un encabezado. No se puede seleccionar, solo agrupa.

<select name="ciudad">
  <optgroup label="Argentina">
    <option value="bsas">Buenos Aires</option>
    <option value="cba">Córdoba</option>
  </optgroup>
  <optgroup label="Chile">
    <option value="stgo">Santiago</option>
  </optgroup>
</select>

Accesibilidad

<select> necesita un <label> asociado por for/id. El rol implícito es listbox. Los lectores de pantalla anuncian el nombre del campo (del label) y la opción actualmente seleccionada. Con multiple, anuncian el modo de selección múltiple.

Para grupos de radio buttons que reemplacen a <select> por razones de accesibilidad, usar <fieldset> con <legend> — ver esa entrada.

Cuándo usar <select> vs radio buttons

Notas, gotchas e interacción

• Siempre definir value en cada <option>. Sin él se envía el texto visible, lo que puede causar inconsistencias si el texto tiene tildes o capitalización variable.
• <select> no acepta placeholder. Para simular un placeholder, usar una primera opción con value="" y disabled selected: <option value="" disabled selected>Seleccioná…</option>.
• multiple cambia completamente la UX. El usuario espera que un <select> normal sea un dropdown. Con multiple, se convierte en una lista — la mayoría de los usuarios no sabe cómo seleccionar varias opciones. En general, checkboxes son más intuitivos para selección múltiple.

Vigente / legacy

<select> y <option> están completamente vigentes. El elemento <optgroup> sigue siendo el único mecanismo nativo para agrupar opciones. No hay atributos legacy relevantes.