Etiqueta HTML <optgroup>
La etiqueta HTML <optgroup> agrupa elementos en una lista desplegable <select>, definidos por la etiqueta <option>. Ver ejemplos.
La etiqueta HTML <optgroup> agrupa elementos <option> relacionados dentro de una lista desplegable <select>. El atributo requerido label define el encabezado del grupo, que el navegador muestra en negrita, mientras que las opciones dentro se indentan automáticamente debajo de él.
Por qué y cuándo usar <optgroup>
Un elemento <select> con una lista larga y plana de opciones es difícil de explorar. Agrupar las opciones bajo encabezados significativos ayuda al usuario a encontrar la opción correcta más rápido. Usa <optgroup> cuando:
- Tu lista desplegable tiene muchas opciones que pertenecen a categorías naturales (países por continente, productos por tipo, fuentes por familia).
- Quieres un encabezado visual dentro de la lista sin que sea un valor seleccionable — la etiqueta de grupo nunca es seleccionable.
- Quieres deshabilitar un lote completo de opciones a la vez con un solo atributo
disabled.
La etiqueta <optgroup> es un elemento asociado a formularios, por lo que solo tiene sentido dentro de un <select> que esté dentro de un <form>.
Sintaxis
La etiqueta <optgroup> viene en pares: los elementos <option> que agrupa se escriben entre las etiquetas de apertura (<optgroup>) y cierre (</optgroup>).
Ejemplo de la etiqueta HTML <optgroup>:
Ejemplo de una lista desplegable
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Resultado
El navegador renderizará una lista desplegable con dos grupos:
- Books: HTML, CSS
- Snippets: Java, Linux, Git
Ejemplo de la etiqueta HTML <optgroup> con el atributo disabled:
Ejemplo de la etiqueta HTML <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup disabled label="Quizzes">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="angularjs">AngularJS</option>
</optgroup>
</select>
</body>
</html>Resultado
El navegador renderizará una lista desplegable con dos grupos:
- Quizzes (deshabilitado): HTML, CSS, JavaScript, PHP — estas opciones aparecen en gris y no se pueden seleccionar.
- Snippets: Git, AngularJS
Cuando un grupo está deshabilitado, ninguna de las opciones dentro de él se puede seleccionar; todo el lote se desactiva en un solo lugar, razón por la cual deshabilitar el grupo es más conveniente que agregar disabled a cada <option> individualmente.
El atributo disabled
disabled es un atributo boolean. La presencia del atributo significa "deshabilitado" — debes escribirlo solo:
<optgroup disabled label="Quizzes">La forma antigua disabled="disabled" que se muestra en el ejemplo anterior aún funciona por razones históricas, pero la forma abreviada boolean es la forma moderna y recomendada. No existe disabled="false" — para habilitar el grupo simplemente omites el atributo.
Usar <optgroup> con <select multiple>
Los grupos funcionan de la misma manera en una lista de selección múltiple. El atributo multiple en <select> permite al usuario elegir varias opciones (Ctrl/Cmd-clic), y los encabezados de grupo permanecen no seleccionables:
<select multiple size="8">
<optgroup label="Front-end">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Back-end">
<option value="php">PHP</option>
<option value="node">Node.js</option>
</optgroup>
</select>Reglas y advertencias
labeles obligatorio. Si lo omites, el grupo se renderiza con una línea de encabezado vacía y el HTML es inválido — la agrupación pierde significado tanto para los usuarios con visión como para la tecnología de asistencia. Siempre proporciona una etiqueta descriptiva.- Accesibilidad. Los lectores de pantalla anuncian el
labeldel grupo cuando el usuario se mueve dentro del grupo, por lo que una etiqueta clara (p. ej. "Books", "Front-end") proporciona a los usuarios contexto esencial sobre dónde se encuentran en la lista. - Sin anidamiento. Un
<optgroup>no puede colocarse dentro de otro<optgroup>. La agrupación es de un solo nivel; HTML no admite subgrupos. - Soporte de estilos inconsistente. Los navegadores renderizan
<optgroup>y<option>usando controles nativos del sistema operativo, por lo que el soporte de CSS es muy limitado e inconsistente. Chrome, Firefox y Safari ignoran muchas propiedades — los fondos, el relleno y las fuentes a menudo no tienen efecto. El CSS siguiente puede funcionar en algunos navegadores y ser completamente ignorado en otros, así que no dependas de él. Si necesitas listas agrupadas con estilos completos, crea un widget personalizado con JavaScript en lugar de aplicar estilos a un<select>nativo.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| disabled | disabled | Indica que la selección de los elementos del grupo está deshabilitada. |
| label | text | Define una etiqueta para el grupo, que se mostrará como encabezado en la lista desplegable. Atributo obligatorio. |
La etiqueta <optgroup> admite los atributos globales y los atributos de evento.
Etiquetas relacionadas
<select>— la lista desplegable que contiene los grupos.<option>— los elementos individuales agrupados por<optgroup>.<form>— el formulario que envía el valor seleccionado.
Cómo aplicar estilos a una etiqueta HTML <optgroup>
Como se señala en las advertencias anteriores, el soporte de los navegadores para aplicar estilos a controles de formulario nativos es limitado e inconsistente. Donde se respeta, puedes usar CSS como este para ajustar el encabezado del grupo y sus opciones, pero prueba en cada navegador de destino antes de confiar en ello:
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}