Checkbox
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;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.
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.
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.
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.).
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.
- 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
Radio Button - Pode ser usado para selecionar opções em configurações ou filtros, onde só é permitida uma única escolha.
Instale o componente via terminal.
npm install @nimbus-ds/checkboxAdditional props are passed to the <Checkbox> element. See input docs for a list of props accepted by the <Checkbox> element.