Checkbox

Formulario

Caixa de seleção com estados marcado, desmarcado e indeterminado (misto), sobre o primitivo Radix.

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Checkbox } from "@trdr/ui/checkbox"

Uso

import { Checkbox } from "@trdr/ui/checkbox"

export function Exemplo() {
  return <Checkbox />
}

Props

CheckboxPropsestende React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>

Prop	Tipo	Descrição
indeterminate?	boolean	Acao de conveniencia para o estado indeterminado (misto), equivalente a `checked="indeterminate"`. O Radix Checkbox ja suporta o terceiro estado nativamente atraves de `CheckedState = boolean \| "indeterminate"`, entao esta prop apenas evita que o consumidor precise lembrar da string literal do Radix quando o unico dado que ele tem e um booleano de "esta parcialmente selecionado".

Quando usar

Use o checkbox para selecao independente de um item dentro de um formulario: aceitar termos, ativar um filtro, marcar uma linha de uma lista. Ele tambem cobre selecao em lote com estado de "selecionar tudo", onde o pai fica indeterminado quando so parte dos itens filhos esta marcada.

Quando nao usar

Nao use checkbox para escolha unica entre opcoes mutuamente exclusivas: isso e um radio-group, nao este componente. Nao use checkbox para ligar ou desligar um recurso com efeito imediato fora de um formulario: nesse caso o Switch comunica a acao instantanea melhor do que uma caixa que sugere "vou confirmar depois".

Anatomia

Checkbox (data-slot="checkbox"): a raiz interativa, com role="checkbox" herdado do Radix.
Indicador (data-slot="checkbox-indicator"): so aparece quando marcado ou indeterminado, trocando entre o icone de check e o traco central via data-state.

Rotulo nao faz parte do componente. Componha com um <label htmlFor> apontando para o id do Checkbox, o mesmo padrao do Radix e do restante do sistema.

Estado indeterminado

O Radix Checkbox ja modela o terceiro estado nativamente: checked aceita boolean | "indeterminate" e o proprio primitivo resolve aria-checked="mixed" sozinho, sem trabalho extra. A prop indeterminate do Checkbox do TRDR UI e apenas acucar sintatico para checked="indeterminate": existe porque a maioria dos consumidores calcula esse estado a partir de um booleano derivado (por exemplo "nem todos os itens estao marcados"), e escrever a string literal do Radix toda vez e ruido.

Acessibilidade

O estado misto expoe aria-checked="mixed" automaticamente. O componente funciona por teclado: Tab foca, Espaco alterna, e no estado indeterminado a primeira interacao sempre marca (nunca desmarca direto do misto). Todo Checkbox sem texto visivel ao lado precisa de aria-label, ja que a raiz nao renderiza rotulo proprio.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="checkbox"][data-slot="checkbox-indicator"]

9 tokens usados

bg-transparentborder-border-disabledborder-border-strongborder-inputoutline-nonering-offset-2ring-offset-backgroundring-ringtext-current