componentes

toggle

componente que permite ligar e desligar uma configuração.

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

error

Set error state @deprecated use the danger variation instead.

falseundefinedboolean

variation

Set style variation

falsesuccesssuccessdanger

checked

Change to checked state

falseundefinedboolean

disabled

Set disabled state

falseundefinedboolean

readOnly

Set read only state

falseundefinedboolean

label

Display label text

falseundefinedstring

hideBorder

Hide border-bottom when label is present

falseundefinedboolean

onChange

Callback called on click

falseundefined() => void

*valores gerados automaticamente.

propriedades para estilização (styled props)

Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:

formatação

Componente com texto e ícone. No texto marcardor de número 1 e no ícone,
marcador de número 2.
  1. Label: texto que identifica a opção.
  2. Icon: ícone para seleção da opção.

uso

É utilizado para ativar ou desativar uma configuração instantaneamente.

grupos e alinhamento

O toggle representa uma configuração independente da outra, por isso pode ser utilizado sozinho ou dentro de um menu de opções.

Ilustração de página web com lista de 4 toggle buttons. O terceiro esta ativo. Botão de enviar no final da lista.
certoUse para ativar configurações instantaneamente.
Ilustração de página web com lista de 4 toggle buttons. O terceiro esta ativo.
erradoNão use botões para confirmar a configuração do toggle.

guia de conteúdo

Utilize verbos afirmativos e claros para indicar a ação a ser realizada.

guia de design

  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Use os design tokens.
  • Tem símbolo no Figma.
  • Possui motion.
  • Possui versão web.
  • Possui versão responsiva.
  • Possui versão mobile.
  • É acessível via leitor de tela.
  • Texto possui contraste acessível (WCAG 2.0 - Nível AA).

conteúdo relacionado

Migração do United para Olist Design System

Propriedades

UnitedOlist Design System
checkedchecked
disableddisabled
onChangeonChange
variationvariation
error
readOnly
label
hideBorder

Variações Existentes

UnitedOlist Design System
alternate
defaultsuccess
danger