Checkbox
Um controle que permite ao usuário alternar entre marcado e desmarcado.
Exemplos
Regular
Desabilitado
Ícone de desmarcar
Com descrição
API
Checkbox
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| asChild | boolean | false | Troca o elemento renderizado por padrão pelo que for passado como filho, mesclando props e comportamento. |
| defaultChecked | boolean | - | Estado marcado do checkbox na primeira renderização. Use quando não precisar controlar o estado marcado. |
| checked | boolean | "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. |
| disabled | boolean | - | Quando true, impede o usuário de interagir com o checkbox. |
| required | boolean | - | Quando true, indica que o usuário precisa marcar o checkbox antes de o formulário ser enviado. |
| name | string | - | Nome do checkbox. É enviado com o formulário como parte de um par nome/valor. |
| value | string | "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. |
| uncheckIcon | boolean | false | Quando true, exibe um ícone de menos em vez do ícone de check quando marcado. |
| Atributo data | Valores |
|---|---|
| [data-state] | "checked" | "unchecked" | "indeterminate" |
| [data-disabled] | Presente quando desabilitado |