Checkgroup

Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

[Descontinuado/Obsoleto] Use br-checkbox-group.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Propriedades

customId

Atributo	custom-id
Descrição	Identificador legado do controlador.
Tipo	string
Valor padrão	---

indeterminate

Atributo	indeterminate
Descrição	Estado indeterminado inicial.
Tipo	boolean
Valor padrão	false

label

Atributo	label
Descrição	Texto descritivo do grupo.
Tipo	string
Valor padrão	---

labelDesselecionado Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	label-desselecionado
Depreciação	Use selectAllLabel.
Descrição
Tipo	string
Valor padrão	---

labelSelecionado Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	label-selecionado
Depreciação	Use unselectAllLabel.
Descrição
Tipo	string
Valor padrão	---

selectAllLabel

Atributo	select-all-label
Descrição	Rótulo para marcar todos.
Tipo	string
Valor padrão	---

unselectAllLabel

Atributo	unselect-all-label
Descrição	Rótulo para desmarcar todos.
Tipo	string
Valor padrão	---

Slots

Nome	Descrição
"default"	Slot para adicionar os checkboxes controlados pelo grupo.

Dependências

Depende de

• br-checkbox-group

Gráfico

Eventos nativos

Elemento HTML de referência

A referência é <fieldset> com <legend> e vários <input type="checkbox">. br-checkgroup coordena br-checkbox; não equivale a um único controle HTML.

Como ouvir os eventos

const group = document.querySelector('br-checkgroup');

group.addEventListener('change', (event) => {
  console.log(event.target);
});

Eventos nativos suportados

Evento	Quando ocorre	Bubbles	Composed	Cancelable	Host	Observações
focusin / focusout	foco entra/sai de um filho	Sim	Sim	Não	Por delegação	Útil para observar o grupo.
input / change	checkbox filho alterna	Sim	Sim	Não	Por delegação	O alvo é o br-checkbox alterado, não o grupo.

Eventos não aplicáveis ou não suportados

Evento	Situação	Motivo	Alternativa
input/change com target no grupo	Não suportado	O grupo não é um controle de valor único.	Ouça por delegação e leia os filhos/FormData.
invalid do grupo	Não aplicável	Validade pertence a cada checkbox.	Consulte os controles requeridos.

Eventos customizados do componente

Os eventos de seleção em massa pertencem à coordenação do grupo e permanecem separados dos eventos nativos emitidos por cada checkbox.

Valor e estado após o evento

Leia checked, value e name nos checkboxes filhos ou serialize o formulário com FormData.

Frameworks

Em HTML, React, Angular e Vue, ouça os filhos ou delegue no grupo. Não trate o host como um HTMLInputElement único.

Acessibilidade

O rótulo do conjunto deve nomear o agrupamento; navegação e Space continuam pertencendo a cada checkbox.

Evidência de teste

_tests/checkgroup.e2e.tsx cobre coordenação, múltiplas instâncias e seleção em Chromium headless. Flags e caminho dos eventos delegados permanecem pendentes.