Introdução

Um controle que permite ao usuário alternar entre os estados marcado, desmarcado e indeterminado.

Uso

import { Checkbox } from "../components/ui";

export default function MyPage() {
  return (
    <Checkbox
      defaultChecked={true}
      onCheckedChange={(details) => console.log(details.checked)}
      interactive
    >
      Accept Terms and Conditions
    </Checkbox>
  );
}

Estado indeterminado

import { Checkbox } from "../components/ui";

export default function MyPage() {
  return (
    <Checkbox checked="indeterminate" interactive>
      Parent Checkbox
    </Checkbox>
  );
}

Construtor de Páginas CMS

Este componente está disponível como um bloco checkbox no Construtor de Páginas (content/pages/*.json):

{
  "type": "checkbox",
  "label": "Accept Terms and Conditions",
  "checked": true,
  "colorPalette": "blue"
}

Propriedades

| checked | `boolean \ | "indeterminate"` | Se o checkbox está marcado (controlado). | | defaultChecked | `boolean \ | "indeterminate"` | O estado de marcação inicial (não controlado). |

| disabled | boolean | Se o checkbox está desabilitado. |

| onCheckedChange | `(details: { checked: boolean \ | "indeterminate" }) => void` | Callback disparado quando o estado de marcação muda. |

| size | `"sm" \ | "md" \ | "lg"` | O tamanho do checkbox. |

| interactive | boolean | Força a hidratação como uma ilha. |