Tag HTML <optgroup>
A tag HTML <optgroup> agrupa elementos numa lista suspensa <select>, definida pela tag <option>. Veja exemplos.
A tag HTML <optgroup> agrupa elementos <option> relacionados dentro de uma lista suspensa <select>. O atributo obrigatório label define o cabeçalho do grupo, que o navegador exibe em negrito, enquanto as opções internas são automaticamente recuadas abaixo dele.
Por que e quando usar <optgroup>
Um elemento <select> com uma lista longa e plana de opções é difícil de percorrer. Agrupar as opções sob cabeçalhos significativos ajuda o utilizador a encontrar a escolha certa mais rapidamente. Use <optgroup> quando:
- A sua lista suspensa tiver muitas opções que se encaixam em categorias naturais (países por continente, produtos por tipo, fontes por família).
- Quiser um cabeçalho visual dentro da lista sem torná-lo um valor selecionável — um rótulo de grupo nunca é selecionável.
- Quiser desativar um conjunto inteiro de opções de uma vez com um único atributo
disabled.
A tag <optgroup> é um elemento associado a formulários, portanto só faz sentido dentro de um <select> que esteja num <form>.
Sintaxe
A tag <optgroup> vem em pares: os elementos <option> que ela agrupa são escritos entre as tags de abertura (<optgroup>) e de fechamento (</optgroup>).
Exemplo da tag HTML <optgroup>:
Exemplo de uma lista suspensa
<!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
O navegador irá renderizar uma lista suspensa com dois grupos:
- Books: HTML, CSS
- Snippets: Java, Linux, Git
Exemplo da tag HTML <optgroup> com o atributo disabled:
Exemplo da Tag 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
O navegador irá renderizar uma lista suspensa com dois grupos:
- Quizzes (desativado): HTML, CSS, JavaScript, PHP — essas opções aparecem a cinzento e não podem ser selecionadas.
- Snippets: Git, AngularJS
Quando um grupo é desativado, nenhuma das opções dentro dele pode ser selecionada; o conjunto inteiro é desligado num único lugar, o que torna a desativação do grupo mais conveniente do que adicionar disabled a cada <option> individualmente.
O atributo disabled
disabled é um atributo boolean. A presença do atributo significa "desativado" — deve escrevê-lo sozinho:
<optgroup disabled label="Quizzes">A forma mais antiga disabled="disabled" apresentada no exemplo acima ainda funciona por razões históricas, mas a forma abreviada boolean é a maneira moderna e recomendada. Não existe disabled="false" — para ativar o grupo, basta omitir o atributo.
Usando <optgroup> com <select multiple>
Os grupos funcionam da mesma forma numa lista de seleção múltipla. O atributo multiple no <select> permite ao utilizador selecionar várias opções (Ctrl/Cmd+clique), e os cabeçalhos de grupo permanecem não selecionáveis:
<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>Regras e armadilhas
labelé obrigatório. Se o omitir, o grupo é renderizado com uma linha de cabeçalho vazia e é HTML inválido — o agrupamento torna-se sem sentido tanto para utilizadores visuais como para tecnologias assistivas. Forneça sempre um rótulo descritivo.- Acessibilidade. Os leitores de ecrã anunciam o
labeldo grupo quando o utilizador se move para dentro do grupo, portanto um rótulo claro (por exemplo, "Books", "Front-end") fornece aos utilizadores contexto essencial sobre onde se encontram na lista. - Sem aninhamento. Um
<optgroup>não pode ser colocado dentro de outro<optgroup>. O agrupamento é apenas de um nível; o HTML não suporta subgrupos. - Suporte de estilização inconsistente. Os navegadores renderizam
<optgroup>e<option>usando controlos nativos do SO, portanto o suporte a CSS é muito limitado e inconsistente. Chrome, Firefox e Safari ignoram muitas propriedades — fundos, padding e fontes geralmente não têm efeito. O CSS abaixo pode funcionar em alguns navegadores e ser completamente ignorado noutros, portanto não confie nele. Se precisar de listas agrupadas totalmente estilizadas, construa um widget personalizado com JavaScript em vez de estilizar um<select>nativo.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| disabled | disabled | Indica que a seleção dos elementos do grupo está desativada. |
| label | text | Define um rótulo para o grupo, que será exibido como cabeçalho na lista suspensa. Atributo obrigatório. |
A tag <optgroup> suporta os Atributos Globais e os Atributos de Evento.
Tags relacionadas
<select>— a lista suspensa que contém os grupos.<option>— os itens individuais agrupados pelo<optgroup>.<form>— o formulário que envia o valor selecionado.
Como estilizar uma Tag HTML <optgroup>
Conforme observado nas armadilhas acima, o suporte dos navegadores para estilização de controlos de formulário nativos é limitado e inconsistente. Onde é respeitado, pode usar CSS como este para ajustar o cabeçalho do grupo e as suas opções, mas teste em cada navegador de destino antes de confiar nele:
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}