Ir para o conteúdo principal

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
Formatar código
Copiar código
Resetar exemplo
StackBlitz
Abrir no StackBlitz
Alternar fundo do preview

Indeterminado​

Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
StackBlitz
Abrir no StackBlitz
Alternar fundo do preview

Propriedades​

checked​

Atributochecked
DescriçãoDefine o estado de seleção do checkbox.
Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.
Tipoboolean
Valor padrãofalse

customId​

Atributocustom-id
DescriçãoIdentificador único.
Caso não seja fornecido, um ID gerado automaticamente será usado.
Tipostring
Valor padrãobr-checkbox-${checkboxId++}

disabled​

Atributodisabled
DescriçãoDesativa o checkbox, tornando-o não interativo.
Tipoboolean
Valor padrãofalse

hasHiddenLabel​

Atributohas-hidden-label
DescriçãoDefine 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.
Tipoboolean
Valor padrãofalse

indeterminate​

Atributoindeterminate
DescriçãoDefine 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.
Tipoboolean
Valor padrãofalse

isFather​

Atributois-father
DescriçãoIndica se o checkbox é pai de um grupo de checkboxes.
Tipoboolean
Valor padrãofalse

label​

Atributolabel
DescriçãoTexto descritivo exibido à direita do checkbox.
Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.
Tipostring
Valor padrão---

name​

Atributoname
DescriçãoDefine 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)
Tipostring
Valor padrão---

required​

Atributorequired
DescriçãoSe verdadeiro, o checkbox é obrigatório e deve ser marcado antes que o formulário possa ser enviado.
Tipoboolean
Valor padrãofalse

state​

Atributostate
DescriçãoIndica 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​

Atributovalue
DescriçãoDefine 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.
Tipostring
Valor padrão---

Slots​

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

Eventos​

EventoDescriçãoPropagação
checkedChangeDisparado depois que o valor do checked foi alteradotrue
indeterminateChangeDisparado depois que o valor do indeterminate foi alterado.true

Métodos​

checkValidity​

AssinaturacheckValidity() => Promise<boolean>
DescriçãoRetorna true se o valor do checkbox for válido, caso contrário false.
Se o checkbox for inválido, dispara um evento 'invalid'.
Parâmetros---

reportValidity​

AssinaturareportValidity() => Promise<boolean>
DescriçãoRetorna true se o valor do checkbox for válido, caso contrário false.
Se for inválido, exibe a mensagem de erro padrão do navegador.
Parâmetros---

setCustomValidity​

AssinaturasetCustomValidity(message: string) => Promise<void>
DescriçãoDefine uma mensagem de validação customizada para o checkbox.
Se a mensagem for uma string vazia, o erro customizado é limpo.
Parâmetrosmessage:

setIndeterminate​

AssinaturasetIndeterminate(value: boolean) => Promise<void>
DescriçãoDefine o estado indeterminado do checkbox.
Parâmetrosvalue: Novo valor para o estado indeterminado.

setNumberOfChildren​

AssinaturasetNumberOfChildren(value: number) => Promise<void>
DescriçãoDefine o número de checkboxes filhos em um grupo de checkboxes.
Parâmetrosvalue: Número de checkboxes filhos.

toggleChecked​

AssinaturatoggleChecked() => Promise<void>
DescriçãoInverte o valor da prop checked
Parâmetros---

Dependências​

Usado por​

Gráfico​

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

Propriedades​

🟦 Propriedades renomeadas​

Propriedade VuePropriedade StencilDescriçãoTipoPadrão
dataChildis-fatherIndica se o checkbox é pai de um grupo.booleanfalse
dataParent---Propriedade removida.------
invalidstateIndica a validade do checkbox (invalid)."invalid" | "valid"---
validstateIndica a validade do checkbox (valid)."invalid" | "valid"---

🟥 Propriedades removidas​

PropriedadeDescriçãoTipoPadrão
inlineFormata o componente para versão horizontal.booleanfalse

Eventos​

🟦 Eventos renomeados​

Evento VueEvento StencilDescrição
update:checkedbrDidCheckedChangeDisparado sempre que o valor do checked é alterado.