Carregando…Carregando…Carregando…Carregando…Checkbox with indeterminate state, intent colors, label and description.
$ npx kikitocn add checkbox@/lib/utilsimport { Checkbox } from "@/components/ui/cn/checkbox/Checkbox";
export function CheckboxExample() {
return (
<div className="flex flex-col gap-2">
<Checkbox label="Aceito os termos de uso" defaultChecked />
<Checkbox label="Receber novidades por e-mail" />
<Checkbox label="Opção desabilitada" disabled />
</div>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
checked | boolean | undefined | Estado marcado (controlled) |
defaultChecked | boolean | false | Estado inicial (uncontrolled) |
indeterminate | boolean | false | Estado intermediário (traço em vez de check) |
onChange | (checked: boolean) => void | undefined | Callback quando o estado muda |
label | string | undefined | Texto ao lado do checkbox |
description | string | undefined | Texto de apoio abaixo do label |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do checkbox |
variant | 'square' | 'rounded' | 'circle' | 'rounded' | Forma do checkbox |
intent | 'primary' | 'secondary' | 'success' | 'destructive' | 'warning' | 'info' | 'primary' | Cor quando marcado |
disabled | boolean | false | Desabilita o checkbox |
Unchecked · checked · indeterminate
Square · rounded · circle
All intents (checked)
Interactive
sm · md · lg