Design system interno · uso exclusivo da Up Web Studio

Icon Provider · Lucide

Primitiveselection

Checkbox

Stable

Primitive de seleção binária, com estado misto para o caso de um pai que controla um grupo. Composto sobre Base UI Checkbox; a área tocável se estende além da caixa de 16px sem deslocar o layout ao redor.

Instalação

npx up-web-ds add checkbox

Gera check, minus para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Default

Checked

Faz parte do npm run check, e não é opcional.

Indeterminate

Lucide e Tabler mapeados; Phosphor e Hugeicons ainda não.

Disabled

Indisponível: o item é restricted.

Invalid

É preciso aceitar para promover o item.

Parent And Children

All states

Default

Checked

Faz parte do npm run check, e não é opcional.

Indeterminate

Lucide e Tabler mapeados; Phosphor e Hugeicons ainda não.

Disabled

Indisponível: o item é restricted.

Invalid

É preciso aceitar para promover o item.

Parent And Children

Metadata

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
selection
Status
Stable

Origem e distribuição

Fonte
shadcn registry / checkbox
Licença
MIT
URL
https://ui.shadcn.com/r/styles/base-vega/checkbox.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Teclado e leitor de tela verificados por teste: alcançável por Tab, Space alterna, o papel é checkbox e aria-checked reporta true, false e mixed. Um checkbox desabilitado sai da sequência de tabulação e recusa a alternância; aria-invalid é exposto sem alterar o papel. Touch verificado em viewport de 375px com emulação de toque: o alvo mede 40x32 contra uma caixa visual de 16x16, acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8. Reduced motion verificado com prefers-reduced-motion: reduce — a única transição é a do anel de foco, que colapsa para 1ms.

Dependências

Pacotes
@base-ui/react
Ícones
check, minus
Construído sobre
Nenhum
Usado por
Nenhum ainda