Componentes
Checkbox
betaMarca uma escolha que só vale quando o formulário for salvo. Se o efeito é imediato, o componente é o Switch.
Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/checkbox
Orientação
Marca uma escolha que só passa a valer quando o formulário for salvo. O estado fica pendente até o envio — essa é a diferença que importa.
Quando usar
- A escolha faz parte de um formulário e só tem efeito no salvamento.
- São várias opções independentes e o usuário pode marcar quantas quiser.
- Aceite de termo, opção de consentimento, inclusão de item numa seleção múltipla.
Quando não usar
- Quando o efeito é imediato. Ligar uma notificação que já vale ao clicar é Switch.
- Quando as opções são mutuamente exclusivas — Radio Group.
- Para selecionar linhas de uma lista operável: o Data Table já traz a seleção pronta, com o estado indeterminado no cabeçalho.
Playground
<Checkbox aria-label="Selecionar aluno" />Uso
Marca uma opção dentro de um conjunto. A mudança só vale depois que alguém confirma — nunca tem efeito sozinha.
Estados
Marcado, desmarcado e desabilitado. Sem estado indeterminado — o componente não expõe essa variante.
Com rótulo
O rótulo faz parte da área de clique. Sem ele, sobra só a caixa pequena para o dedo acertar.
Lista de opções
Várias marcações independentes no mesmo grupo — cada uma decide sozinha se entra na seleção.
Inválido
`aria-invalid` marca a caixa em vermelho quando a seleção é obrigatória e ninguém marcou nada.
Acessibilidade
O que o componente já garante, e o que continua sendo responsabilidade da tela.
- Precisa de rótulo associado. A varredura do sensor pegou exatamente isso nesta página: caixa sem nome acessível é anunciada como
checkboxe mais nada. - Espaço alterna o estado; o foco precisa ser visível no controle, não só no rótulo.
- O estado indeterminado é para o pai de uma lista parcialmente marcada — não use como terceiro valor de negócio.
Componentes relacionados
Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Checkbox não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.
Pendência editorial: exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.
Origem do dado
- Orientação, acessibilidade e relacionados: documentação
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css