Pular para o conteúdo
Faculdade PhorteDesign System

Checkbox

Em andamento

Caixa de marcar com rótulo, para escolhas independentes — cada uma liga ou desliga sozinha. Tem o estado parcialmente marcado, para o item-pai de um grupo, e a variante aceite, para o "Li e aceito os termos".

Função
Formulário e ação
Também chamado de
caixa de seleção, checkbox, aceite, termos de uso
Mora em
app/components/atoms/Checkbox.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Interativo, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Interativo
  2. Estados
  3. Parcialmente marcado
  4. Com erro
  5. Aceite
  6. Grupo

Quando usar

Quando cada opção vale por si e a pessoa pode marcar várias, ou nenhuma — e quando a escolha só vale ao enviar o formulário.

Faça

  • Escreva o rótulo como afirmação que a marca torna verdadeira: "Quero receber novidades".
  • Agrupe opções relacionadas num <fieldset> com <legend>.
  • Use indeterminado no item-pai quando só parte dos filhos está marcada.
  • Use variant="aceite" só no aceite que libera o envio.

Evite

  • Usar aceite em opção comum: o vermelho diz "ainda falta", e opção comum não tem lado certo.
  • Passar aria-invalid sem mensagem de erro: a caixa fica vermelha e muda. O erro vem do FormField, com o texto.
  • Rótulo negativo ("Não quero receber…") — marcar para desligar confunde.

Quando não usar. Para uma escolha só entre várias, use o Radio. Para ligar algo com efeito imediato, o Toggle. Para filtrar uma lista na hora, o FilterGroup.

Nota de uso

O estado de erro é visível, e não só anunciado: sai do mesmo aria-invalid que o FormField usa como fonte única. Passar aria-invalid sem passar a mensagem deixa o campo vermelho e mudo — as duas coisas andam juntas. indeterminado desenha um traço e o leitor anuncia "parcialmente marcado": é o item-pai de um grupo. A linha inteira é o <label>, com 44px de altura — a caixa continua com 16px. Nos três controles de marcação a className vai para o invólucro. `variant="aceite"` é para o aceite que libera o envio (termos de uso, contrato): vermelha enquanto falta, verde quando aceita. O vermelho ali é "ainda falta", não erro — não emite aria-invalid; o erro, se o envio for tentado, vem do FormField. Não use em opção comum, que não tem lado certo.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Caixa — 16px, borda de controle; marcada, fundo vermelho de interface (ou verde, no `aceite`) com o visto branco.
  2. Rótulo — Texto `text-sm` ao lado. A linha inteira é o `<label>`: tocar em qualquer ponto marca.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
DesmarcadaCaixa vazia, borda --border-interactive. No aceite: borda e fundo vermelhos claros.
MarcadaFundo --primary com visto branco. No aceite: fundo --success.
Parcialmente marcadaindeterminado: traço no lugar do visto; o leitor anuncia "parcialmente marcado".
FocoAnel ring-ring de 2px em volta da caixa, só no teclado.
Erroaria-invalid (vindo do FormField): borda vermelha.
DesabilitadaLinha inteira a 50% de opacidade, cursor proibido e fora da ordem de Tab.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Link dentro do rótuloClicar no link abre o destino e não marca a caixa: o label não ativa o controle quando o clique é num link (é o HTML). A prop rotuloInterativo que a E73 previa não foi criada por isso — conferido no teste da Newsletter.
Clique na caixa ou no textoMarca ou desmarca — o rótulo é o <label> da caixa.
`indeterminado` mudaO componente liga a propriedade indeterminate do <input> por JavaScript — não existe atributo HTML para ela.
Aceite marcadoA caixa passa do vermelho ao verde; não emite aria-invalid em nenhum dos dois.

Relacionados