Selecionar itens de uma lista: escolher um ou vários elementos opcionais dentro de uma lista de dados.
Ativar filtros em simultâneo: habilitar vários atributos de um filtro ou de uma busca ao mesmo tempo.
Selecionar linhas de uma tabela: marcar múltiplas linhas para executar ações em massa.
Confirmar uma aceitação: registrar o consentimento a uma condição pontual, como aceitar termos e condições.

Quando não usar

Escolher uma opção excludente: selecionar uma única opção entre várias mutuamente excludentes. Em vez disso, usar Radio.
Aplicar uma mudança imediata: ativar ou desativar uma configuração com efeito imediato. Em vez disso, usar Toggle.
Disparar uma ação: executar algo na hora em vez de registrar uma seleção. Em vez disso, usar Button.

Anatomia

Opção

Container: caixa de seleção que reflete o estado e recebe a interação.
Icon: marca que aparece dentro do contêiner conforme o estado: um check quando está marcado ou uma linha quando é indeterminate.
Label: texto que descreve a opção que o controle representa.

Variantes

Aparência

Opção

Primary: aparência por padrão.

Opção

Danger: sinaliza um erro de validação na seleção. Ex.: um checkbox obrigatório que ficou sem marcar ao enviar o formulário.

Gerado por IA

Opção

aiGenerated: aplica uma borda com degradê de IA para indicar que o valor foi sugerido por inteligência artificial. Ex.: uma opção pré-preenchida por uma sugestão automática.

Estados

Aplicação

Costuma aparecer em formulários, listas de opções, painéis de configuração e filtros, junto ao label que descreve a opção para deixar claro o que está sendo ativado ou desativado.

Meios de pagamento aceitos

Cartão de crédito

Pix

Boleto bancário

Do and Don'ts

Acessibilidade

Label associado: acompanhar sempre o controle com um label que descreva a opção, para que leitores de tela anunciem do que se trata.
Navegação por teclado: o checkbox é alcançável com Tab e é marcado ou desmarcado com a barra de espaço.
Foco visível: o controle mostra um anel de foco ao navegar com teclado, sem depender do ponteiro.
Não depender só da cor: a aparência danger é acompanhada de um texto de erro ou ajuda, já que a cor sozinha não comunica o problema.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/components

import React from "react";
import { Checkbox } from "@nimbus-ds/components";

const Example: React.FC = () => <Checkbox name="my-checkbox" label="Label" />;

export default Example;

Props

Propriedades adicionais são repassadas ao elemento <Checkbox>. Consulte a documentação do elemento input para ver a lista de atributos aceitos.

Componentes relacionados

Radio — Para selecionar uma única opção entre várias mutuamente excludentes.
Toggle — Para ativar ou desativar uma configuração com efeito imediato.

Checkbox

Name	Type	Default	Description
name*	string		The name of the input element.
appearance	'danger' 'primary'	'neutral'	Change the visual style of the checkbox.
checked	boolean		Modifies true/false value of the native checkbox.
disabled	boolean		Modifies the native disabled state of the native checkbox.
indeterminate	boolean	'false'	If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.
label	string		Text to be rendered inside the component.
aiGenerated	boolean	'false'	Highlights the checkbox to indicate its value was generated by AI. Applies AI gradient border that persists regardless of checked state.

Checkbox.Skeleton

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
className	string
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.

Ajude-nos a melhorar a documentação

Encontrou um problema ou tem uma sugestão? Conte para a gente.

Compartilhe seu feedback