AppCheckboxGroup

Moléculas

Abrir no Storybook

Agrupa caixas de seleção relacionadas em um <fieldset> com legenda e feedback do grupo.

Quando usar: várias escolhas que pertencem à mesma pergunta ou preferência.

Quando não usar: uma única caixa de seleção isolada (use AppCheckbox) ou escolha exclusiva (use AppRadioGroup).

O grupo não controla o estado das opções: passe as props nativas a cada AppCheckbox filho.

Importar

import { AppCheckboxGroup } 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/AppCheckboxGroup.css';

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

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

Exemplos

Default

Exemplo: AppCheckboxGroup, Default

const Default = () => <AppCheckboxGroup legend="Interesses" hint="Escolha todas as opções que desejar.">(<>
      <AppCheckbox label="Eventos" />
      <AppCheckbox label="Novidades do produto" />
      <AppCheckbox label="Conteúdos educativos" />
    </>)</AppCheckboxGroup>;

With Error

Exemplo: AppCheckboxGroup, With Error

const WithError = () => <AppCheckboxGroup legend="Preferências" error="Escolha ao menos uma opção."><AppCheckbox label="Eventos" /></AppCheckboxGroup>;

Props

Prop	Tipo	Padrão	Descrição
children*	ReactNode	—	Opções AppCheckbox do grupo.
legend*	ReactNode	—	Legenda visível que dá nome acessível ao grupo.
error	string	—	Mensagem de erro que marca o grupo como inválido.
hint	string	—	Texto de apoio abaixo das opções. Some enquanto houver error.
orientation	"horizontal" | "vertical"	vertical	Disposição das opções. Padrão: vertical.