Pular para o conteúdo
UI

Checkbox

Um controle que permite ao usuário alternar entre marcado e desmarcado.

Exemplos

Regular

Desabilitado

Ícone de desmarcar

Com descrição

API

Checkbox

PropriedadeTipoPadrãoDescrição
asChildbooleanfalseTroca o elemento renderizado por padrão pelo que for passado como filho, mesclando props e comportamento.
defaultCheckedboolean-Estado marcado do checkbox na primeira renderização. Use quando não precisar controlar o estado marcado.
checkedboolean | "indeterminate"-Estado marcado do checkbox no modo controlado. Deve ser usado junto com onCheckedChange. O estado "indeterminate" renderiza a caixa preenchida com um ícone de traço.
onCheckedChange(checked: boolean | "indeterminate") => void-Função chamada quando o estado marcado do checkbox muda.
disabledboolean-Quando true, impede o usuário de interagir com o checkbox.
requiredboolean-Quando true, indica que o usuário precisa marcar o checkbox antes de o formulário ser enviado.
namestring-Nome do checkbox. É enviado com o formulário como parte de um par nome/valor.
valuestring"on"Valor enviado como dado quando o checkbox é submetido com um name.
variant"regular""regular"Estilo visual do checkbox.
size"sm" | "md" | "lg""md"Tamanho do checkbox.
uncheckIconbooleanfalseQuando true, exibe um ícone de menos em vez do ícone de check quando marcado.
Atributo dataValores
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]Presente quando desabilitado