AppCheckbox

Átomos

Caixa de seleção nativa com rótulo, mensagem de apoio e estado indeterminado opcional.

Quando usar: seleção independente de uma ou mais opções, inclusive o estado parcial de um conjunto.

Quando não usar: escolha exclusiva entre opções (use AppRadio ou AppRadioGroup).

O ref e todas as props HTML são repassados ao <input> nativo.

Importar

import { AppCheckbox } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppCheckbox.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppCheckbox.css';

Exemplos

Default

const Default = () => <AppCheckbox label="Receber novidades" />;

Sizes

const Sizes = () => (
  <div style={{ display: 'grid', gap: 16 }}>
    <AppCheckbox size="sm" label="Pequeno" />
    <AppCheckbox size="md" label="Médio" defaultChecked />
    <AppCheckbox size="md" label="Parcial" indeterminate />
    <AppCheckbox size="md" label="Indisponível" disabled defaultChecked />
  </div>
);

With Hint

const WithHint = () => <AppCheckbox
    label="Receber novidades"
    hint="Você pode alterar esta preferência depois." />;

With Error

const WithError = () => <AppCheckbox
    label="Receber novidades"
    error="Confirme o recebimento de novidades." />;

Indeterminate

const Indeterminate = () => <AppCheckbox label="Selecionar todos" indeterminate />;

Disabled

const Disabled = () => <AppCheckbox label="Receber novidades" disabled defaultChecked />;

Props

Prop	Tipo	Padrão	Descrição
`error`	`string`	`—`	Mensagem de erro que marca o controle como inválido.
`hint`	`string`	`—`	Texto de apoio abaixo do rótulo. Some enquanto houver `error`.
`indeterminate`	`boolean`	`false`	Exibe o estado parcialmente selecionado no controle nativo.
`label`	`ReactNode`	`—`	Rótulo visível. Informe `label` ou `aria-label` para dar nome acessível ao controle.
`size`	`"sm" \| "md"`	`md`	Tamanho do controle e da tipografia. Padrão: `md`.