Checkbox
Caixa de seleção que liga ou desliga uma opção, ou escolhe quantas quiser de uma lista. O CheckboxGroup guarda os valores num array e pode controlar uma caixa de "selecionar todos".
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Envolva cada checkbox num Label para o texto ser clicável e dar nome a ele.
import { Checkbox, CheckboxGroup, Label } from "@camaleo/react";Anatomia
Um Checkbox é uma caixa com um indicador dentro. Um CheckboxGroup envolve vários checkboxes com rótulo e mantém os valores juntos.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Grupo com legenda
Fieldset render={<CheckboxGroup />} dá um nome às opções, então o leitor de tela anuncia "Quero receber e-mails sobre" antes de cada uma.
Colunas para exportar
2 de 4 colunas selecionadas
Selecionar todos
Clique nos filhos. Com allValues no grupo e parent numa caixa, ela mostra o estado misto quando só algumas estão marcadas.
Reembolsos acima de R$ 2.500,00 esperam a aprovação de um administrador.
Com descrição
Deixe o rótulo curto e explique a consequência embaixo, ligada com aria-describedby para ser lida depois do nome.
Obrigatório, com erro
Envie sem marcar. Diga o que fazer na mensagem de erro, não só "Obrigatório"; o Field liga a mensagem ao checkbox.
Disponível no plano Empresa.
Desativado, com o motivo
Uma caixa desativada ainda mostra o que está incluído. Quando estiver desmarcada, diga por quê, para a pessoa saber como conseguir.
| Nota | Cliente | Valor | |
|---|---|---|---|
| #1042 | Padaria Pão Dourado | R$ 1.280,00 | |
| #1043 | Estúdio Lume | R$ 640,50 | |
| #1044 | Transportes Atlas | R$ 3.915,00 |
Seleção de linhas
Numa tabela, a linha é o rótulo; então dê a cada checkbox um aria-label que nomeie a linha.
Em contexto
Checkboxes vivem em formulários e listas. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Crie sua conta
Grátis por 14 dias. Sem cartão.
Filtros
Checklist de lançamento
2 de 5 concluídas
Boas práticas
Cada uma vale sozinha: dá para escolher nenhuma, uma ou todas.
Mensal e anual ao mesmo tempo não faz sentido. Use um RadioGroup.
Caixa marcada deve significar sim: "Quero receber o resumo semanal".
Uma marcação que quer dizer "não deixar de" obriga a pessoa a parar e reler.
Props
defaultChecked.CheckboxGroup (o "selecionar todos").CheckboxGroup e é o valor enviado no formulário.O CheckboxGroup recebe value, defaultValue e onValueChange (arrays com o value dos checkboxes), allValues para uma caixa pai, e disabled. Os atributos nativos passam direto.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio checkbox.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- A área de toque tem pelo menos 24 × 24 px (WCAG 2.5.8) em todos os estilos, mesmo quando a caixa visível é menor.
- Clicar no texto do rótulo marca a caixa, então envolva-a num Label ou ligue com htmlFor; o id fica na própria caixa, que um link do ErrorSummary também consegue focar.
- O estado misto é anunciado como "misto" pelo aria-checked, não só desenhado como um traço.
- Dentro de um Field, a descrição e o erro ficam ligados à caixa pelo aria-describedby.