Copiar página como Markdown para IA
Checkbox Group
Visão Geral
O br-checkbox-group reúne checkboxes da mesma pergunta e adiciona um checkbox "Selecionar tudo" no topo.
O "Selecionar tudo" marca ou desmarca todas as opções e fica em estado parcial quando só algumas estão marcadas. O label vira a legenda do grupo para leitores de tela.
<br-checkbox-group label="Receber notificações por">
<br-checkbox name="canais" value="email" label="E-mail"></br-checkbox>
<br-checkbox name="canais" value="sms" label="SMS"></br-checkbox>
<br-checkbox name="canais" value="app" label="Aplicativo"></br-checkbox>
</br-checkbox-group>
Use orientation="horizontal" para as opções lado a lado, e select-all-label e unselect-all-label para trocar os textos do "Selecionar tudo".
Quando usar
- Várias opções independentes que respondem à mesma pergunta.
Quando evitar
- Um único checkbox, como aceite de termos: use só o
br-checkbox. - Apenas uma opção pode ser escolhida: use
br-radio-group.
Consulte as diretrizes de design do GovBR.
Exemplo(s)
Carregando preview…
HTML
Controles do componente
Console: logs, eventos e erros
Angular (Somente leitura)
React (Somente leitura)
Vue (Somente leitura)
Acessibilidade
Recolher controles e código
Desfazer alteração
Refazer alteração
Comparar alterações
Formatar código
Resetar código para o estado inicial
Propriedades
customId
| Atributo | custom-id |
|---|---|
| Descrição | Identificador único do controlador. |
| Tipo | string |
| Valor padrão | generateUniqueId('br-checkbox-group') |
disabled
| Atributo | disabled |
|---|---|
| Descrição | Desabilita o controlador e os checkboxes contidos no grupo. |
| Tipo | boolean |
| Valor padrão | false |
indeterminate
| Atributo | indeterminate |
|---|---|
| Descrição | Define o estado indeterminado inicial do grupo. |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
|---|---|
| Descrição | Texto descritivo do grupo. |
| Tipo | string |
| Valor padrão | --- |
orientation
| Atributo | orientation |
|---|---|
| Descrição | Orientação visual das opções. Valores inválidos usam vertical. |
| Tipo | "horizontal" | "vertical" |
| Valor padrão | 'vertical' |
selectAllLabel
| Atributo | select-all-label |
|---|---|
| Descrição | Rótulo para marcar todos os checkboxes. |
| Tipo | string |
| Valor padrão | 'Selecionar tudo' |
unselectAllLabel
| Atributo | unselect-all-label |
|---|---|
| Descrição | Rótulo para desmarcar todos os checkboxes. |
| Tipo | string |
| Valor padrão | 'Desselecionar tudo' |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para adicionar os checkboxes controlados pelo grupo. |
