Checkbox
Caixa de seleção (Nuxt UI) — seleção de linha na index e múltipla escolha em formulários.
Componente base do Nuxt UI (
UCheckbox / UCheckboxGroup), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.O Checkbox é a caixa marcada/desmarcada. Na index, é a coluna de seleção de linha; em formulários, a escolha múltipla.
Uso em tela
Na index, o checkbox do cabeçalho seleciona/limpa a página inteira e usa o estado indeterminate quando só parte está selecionada — a seleção é o que dispara as Ações em massa. Em formulário, use UCheckboxGroup para listas curtas. Para escolher itens entre duas listas (ex.: editar colunas), use o DualList — não uma pilha de checkboxes.
Estados
| Estado | Comportamento |
|---|---|
| Marcado / desmarcado | Seleção binária; o rótulo ao lado é sempre clicável junto da caixa. |
| Indeterminado | Cabeçalho da tabela quando só parte da página está selecionada (aria-checked="mixed") — sinal além do visual. |
| Desabilitado | Inerte quando a opção não se aplica ao contexto; percebido além da cor. |
No código
UCheckbox — doc técnica em ui.nuxt.com/docs/components/checkbox.
Acessibilidade
- Use o checkbox nativo (
role/checked) — não recrie comdiv; rótulo associado e clicável. - Estado indeterminate anunciado (
aria-checked="mixed"), não só visual. - Foco visível e acionável por teclado (
Espaço); alvo de toque ≥ 44px mesmo em densidade de tabela. - Em seleção de linha (index), a marcação/contagem deve ser anunciada (
aria-live).