Caixa de seleção

Uma caixa de seleção 16px construída no React Aria. Os estados verificados e indeterminados tornam o gradiente primário com o realce interno da Figma, e o tick se desenha com uma animação de curso.

Instalação

Você pode adicionar este componente da caixa de seleção usando nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add checkbox

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Tamanhos

Dois tamanhos através do tamanho aderente - md (16px, o padrão) e sm (14px, usado em tabelas densas).

md - 16px
sm - 14px
<Checkbox size="md" defaultSelected /> {/* 16px (default) */}<Checkbox size="sm" defaultSelected /> {/* 14px */}

& Controle de etiquetas

Passar crianças para uma etiqueta - React Aria associa- a à entrada automaticamente. Use éSelecionado + emMudança para o estado controlado, ou por omissãoSelecionado para descontrolado.

{/* children become the label - clicking it toggles the box */}<Checkbox defaultSelected>Remember me</Checkbox><Checkbox>Send me product updates</Checkbox> {/* Controlled */}<Checkbox isSelected={checked} onChange={setChecked}>Terms</Checkbox>

Cartão

Carta selecionável com um título e uma descrição opcional - a carta inteira comuta a caixa de seleção e mostra um fundo do hover. É um item de registro separado: npx boardui add checkbox-card.

import { CheckboxCard } from "@/components/base/checkbox/checkbox-card"; <CheckboxCard title="Item title" description="This is for you to check." /><CheckboxCard defaultSelected title="Item title" description="This is for you to check." /><CheckboxCard title="No description" />