Checkbox

Visão Geral

Design System

Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplos

Básico

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Indeterminado

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Propriedades

checked

Atributo	checked
Descrição	Define o estado de seleção do checkbox. Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.
Tipo	boolean
Valor padrão	false

customId

Atributo	custom-id
Descrição	Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
Tipo	string
Valor padrão	br-checkbox-${checkboxId++}

disabled

Atributo	disabled
Descrição	Desativa o checkbox, tornando-o não interativo.
Tipo	boolean
Valor padrão	false

hasHiddenLabel

Atributo	has-hidden-label
Descrição	Define se o label associado ao checkbox deve ser oculto. Se definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.
Tipo	boolean
Valor padrão	false

indeterminate

Atributo	indeterminate
Descrição	Define o estado intermediário do checkbox. Quando verdadeiro, exibe uma marcação parcial visual que indica seleção parcial. Útil para representar grupos onde alguns itens estão selecionados, mas não todos. Ao clicar no checkbox neste estado, ele será automaticamente alterado para marcado.
Tipo	boolean
Valor padrão	false

isFather

Atributo	is-father
Descrição	Indica se o checkbox é pai de um grupo de checkboxes.
Tipo	boolean
Valor padrão	false

label

Atributo	label
Descrição	Texto descritivo exibido à direita do checkbox. Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.
Tipo	string
Valor padrão	---

name

Atributo	name
Descrição	Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo. O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários. (obrigatório)
Tipo	string
Valor padrão	---

state

Atributo	state
Descrição	Indica a validade do checkbox. Se não for especificado, o valor padrão é null, indicando que a validade não foi definida.
Tipo	"invalid" | "valid"
Valor padrão	---

value

Atributo	value
Descrição	Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (<form>). Esse valor é enviado com o formulário quando o checkbox está selecionado. Nota: Esta propriedade não deve ser utilizada para determinar se o checkbox está selecionado; para verificar o estado de seleção, use a propriedade checked.
Tipo	string
Valor padrão	---

Slots

Nome	Descrição
"default"	Slot para o rótulo do checkbox, como alternativa à propriedade label.

Eventos

Evento	Descrição	Propagação
checkedChange	Disparado depois que o valor do checked foi alterado	true
indeterminateChange	Disparado depois que o valor do indeterminate foi alterado.	true

Métodos

setIndeterminate

Assinatura	setIndeterminate(value: boolean) => Promise<void>
Descrição	Define o estado indeterminado do checkbox.
Parâmetros	value: Novo valor para o estado indeterminado.

setNumberOfChildren

Assinatura	setNumberOfChildren(value: number) => Promise<void>
Descrição	Define o número de checkboxes filhos em um grupo de checkboxes.
Parâmetros	value: Número de checkboxes filhos.

toggleChecked

Assinatura	toggleChecked() => Promise<void>
Descrição	Inverte o valor da prop checked
Parâmetros	---

Dependências

Usado por

• br-checkgroup
• br-select

Gráfico

Migração: Vue 1.x → Stencil 2.x

Propriedades

🟦 Propriedades renomeadas

Propriedade Vue	Propriedade Stencil	Descrição	Tipo	Padrão
dataChild	is-father	Indica se o checkbox é pai de um grupo.	boolean	false
dataParent	---	Propriedade removida.	---	---
invalid	state	Indica a validade do checkbox (invalid).	"invalid" | "valid"	---
valid	state	Indica a validade do checkbox (valid).	"invalid" | "valid"	---

🟥 Propriedades removidas

Propriedade	Descrição	Tipo	Padrão
inline	Formata o componente para versão horizontal.	boolean	false

Eventos

🟦 Eventos renomeados

Evento Vue	Evento Stencil	Descrição
update:checked	brDidCheckedChange	Disparado sempre que o valor do checked é alterado.