Checkbox

2.3.0

O componente Checkbox nos permite escolher uma ou diversas opções em uma lista de seleção.

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

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

export default Example;

Anatomia do componente

O componente é composto por uma caixa de seleção com seus respectivos estados, além de um label para o conteúdo referente a opção.

Guidelines

Utilizamos esse componente para selecionar opções em formulários de múltipla escolha, opções de configurações, listas ou tabelas de entrada para executar ações massivas ou de filtragem de dados.

Estados possíveis

O componente Checkbox possui 4 possibilidades de configuração, podendo ser utilizadas de acordo com o contexto e necessidade da aplicação.

Unchecked - é usado para representar um checkbox não selecionado;
Checked - é usado para representar um checkbox selecionado;
Indeterminate - é usado para representar outros checkboxes com status distintos;
Disabled - é usado para representar que um checkbox está desabilitado, esse estado pode ser combinado com os 3 anteriores.

Labels

O componente sempre deve ser acompanhado de um label que descreve claramente a opção representada, sempre iniciando com a primeira letra maiúscula, e as frases nunca devem terminar em ponto ou vírgula. As opções devem ser ordenadas utilizando um critério lógico específico (alfabético, numérico, temporal, etc.).

Aria Label

Para facilitar a navegação de pessoas com algum tipo de limitação visual ou cognitiva, esse componente possui uma tag (Aria Label) para informar qual o status do Checkbox.

Recomendações de uso

Selecionar itens opcionais em listas de dados
Selecionar múltiplos dados de uma só vez
Selecionar atributos de um filtro ou busca
Selecionar múltiplas linhas de uma tabela

Componentes relacionados

Radio Button - Pode ser usado para selecionar opções em configurações ou filtros, onde só é permitida uma única escolha.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/checkbox

Props

Additional props are passed to the <Checkbox> element. See input docs for a list of props accepted by the <Checkbox> element.

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		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.

Checkbox.Skeleton

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