<optgroup>: Elemento OPTGROUP
Última atualização: 2026-10-13
<optgroup>Elemento OPTGROUP
Agrupa opções dentro de um select, exibido como rótulo de grupo não selecionável.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </optgroup> tag |
| Status | Padrão |
📝 Sintaxe
<select>
<optgroup label="Frutas">
<option>Maçã</option>
</optgroup>
</select>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
label | The group's label text (required). | |
disabled | Disables all options in the group. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <optgroup> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： optgroup não pode ser aninhado e suas opções devem permanecer dentro dele.
❓ Perguntas Frequentes
QPara que serve optgroup?
AAgrupa
<option> dentro de <select>; o atributo label mostra o título do grupo (como «Sudeste», «Sul»). O título não é selecionável — serve só de navegação por categoria, melhorando bastante a legibilidade de listas longas.Qoptgroup pode ser aninhado?
ANão; a especificação permite só um nível — dentro do optgroup cabem apenas options, e optgroup aninhado é HTML inválido. Para classificações de dois níveis ou mais, use prefixos no texto das opções ou componentes personalizados.
QO label do optgroup é enviado no formulário?
ANão. Envia-se apenas o value da option selecionada; o título do grupo é só visual. Ele também não participa da validação, e desativar o optgroup inteiro (atributo disabled) desativa em cascata todas as opções do grupo.
🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
