La Etiqueta OPTGROUP

La etiqueta <optgroup> se utiliza dentro de un elemento <select> para agrupar opciones relacionadas en un menú desplegable. Es ideal para organizar listas largas de opciones en categorías, mejorando la usabilidad y accesibilidad. Cada grupo tiene una etiqueta descriptiva y no es seleccionable.

Casos de uso comunes:

• Menús de países agrupados por continentes.

• Productos clasificados por categorías (ej: electrónicos, ropa).

• Opciones de configuración con subsecciones.

Sintaxis básica

<select>
  <optgroup label="Nombre del grupo">
    <option>Opción 1</option>
    <option>Opción 2</option>
  </optgroup>
</select>

Atributos clave:

• label: Texto que identifica el grupo (obligatorio).

• disabled: Si se agrega, desactiva todas las opciones del grupo.

Ejemplos prácticos

Agrupación de países por región

<select>
  <optgroup label="América">
    <option>México</option>
    <option>Argentina</option>
  </optgroup>
  <optgroup label="Europa">
    <option>España</option>
    <option>Francia</option>
  </optgroup>
</select>

Resultado:

Grupo deshabilitado

<select>
  <optgroup label="Colores primarios">
    <option>Rojo</option>
    <option>Azul</option>
  </optgroup>
  <optgroup label="Colores secundarios" disabled>
    <option>Verde</option>
    <option>Morado</option>
  </optgroup>
</select>

Resultado:

Los colores secundarios aparecen atenuados y no seleccionables.

Estilización (limitaciones y soluciones)

Los navegadores aplican estilos predeterminados a <optgroup>, pero la personalización es limitada:

Estilos nativos: Las etiquetas de grupo suelen mostrarse en negrita y no son seleccionables.

CSS personalizado: Puedes modificar fuentes o colores, pero no todos los navegadores lo permiten:

optgroup {
  font-style: italic;
  color: #666;
}

Alternativas avanzadas: Usa librerías como Select2 o Bootstrap Select para diseños más flexibles.

Accesibilidad

• Lectores de pantalla: Anuncian la etiqueta del grupo antes de las opciones.

• Mejores prácticas:

  • Usa label descriptivo (ej: "América del Norte", no "Grupo 1").

  • Evita anidar <optgroup> (no está permitido en HTML).

  • No abuses de los grupos; demasiados pueden confundir al usuario.

Errores comunes

Olvidar el atributo label:

<!-- Incorrecto -->
<optgroup>
  <option>Opción</option>
</optgroup>

Anidar grupos:

<!-- Incorrecto -->
<optgroup label="Parent">
  <optgroup label="Child"> <!-- No válido -->
    <option>...</option>
  </optgroup>
</optgroup>

Usar <optgroup> como opción seleccionable: Las etiquetas de grupo no pueden elegirse, solo organizan las opciones.

<optgroup> vs <option disabled>

<optgroup>	<option disabled>
Agrupa opciones con una etiqueta.	Simula un encabezado no clicable.
Semánticamente correcto.	Menos accesible (puede confundir).
Ejemplo: Países por continente.	Ejemplo: "Seleccione una opción".

Ejemplo avanzado: Menú de productos

<select id="productos">
  <optgroup label="Electrónicos">
    <option>Smartphone</option>
    <option>Laptop</option>
  </optgroup>
  <optgroup label="Ropa">
    <option>Camisetas</option>
    <option>Pantalones</option>
  </optgroup>
</select>

<script>
  // JavaScript: Acceder al valor seleccionado
  document.getElementById("productos").addEventListener("change", function() {
    console.log("Producto seleccionado:", this.value);
  });
</script>

Conclusión

La etiqueta <optgroup> es una herramienta esencial para organizar menús desplegables complejos de manera semántica y accesible. Úsala cuando:

• Las opciones pueden dividirse en categorías lógicas.

• Quieres mejorar la experiencia del usuario en formularios largos.

• Priorizas la accesibilidad para tecnologías de asistencia.

Ejemplo final:

<select>
  <optgroup label="Fruta">
    <option>Manzana</option>
    <option>Plátano</option>
  </optgroup>
  <optgroup label="Verdura">
    <option>Zanahoria</option>
    <option>Brócoli</option>
  </optgroup>
</select>

¡Implementa <optgroup> para crear formularios más intuitivos y profesionales!