Toggle

2.2.2

O componente Toggle nos permite ativar ou desativar items.

Default

Active

Label

Skeleton

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

const Example: React.FC = () => <Toggle name="my-toggle" />;

export default Example;

Anatomia do componente

O componente é composto por seletor com duas posições.

Guidelines

Utilizamos esse componente para ajustar configurações de opções binárias, por exemplo: on/off ou verdadeiro ou falso. Além disso, este componente caracteriza-se por executar imediatamente as configurações selecionadas. Ou seja, ele não precisa passar por uma instância de salvamento de dados após mudar de posição. É por isso que deve ser usado apenas em contextos em que o salvado de dados é instantâneo.

AriaLabel

Esse componente não possui texto, porém ele possui uma tag (Aria Label) para facilitar sua identificação do seu status por pessoas com algum tipo de limitação visual ou cognitiva.

Recomendações de uso

Ativar ou desativar um único item
Ativar ou desativar algo imadiatamente

Componentes relacionados

Radio - Pode ser utilizada para selecionar uma única opção dentro de uma lista não binária, com dois ou mais itens.
Checkbox - Pode ser usado para ativar ou desativar uma única opção em um contexto onde o salvado de dados não é imediato.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/toggle

Props

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

Toggle

Name	Type	Description
name*	string	The name of the input element.
active	boolean	Sets toggle state to activated or deactivated.
label	string	Text to be rendered inside the component

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