componentes

radio

Componente para seleção em uma lista curta de opções.

demo interativa

Uma versão de interativa do componente desenvolvido.

Exemplo com erro

RadioGroup

propriedades*

propertydescriptionrequireddefault valuetype

inline

Change direction of radios from vertical to horizontal

falseundefinedboolean

errorMessage

Render an error message below all radio options

falseundefinedstringboolean

name

Set radio name

trueundefinedstring

onChange

Called when a different radio option is checked

trueundefinedChangeEventHandler<HTMLInputElement>

selectedRadio

Set which radio option is selected

falseundefinedstring

readOnly

Set read only state

falseundefinedboolean

error

Set error state to all radio options

falseundefinedboolean

*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:

RadioGroup.Radio

propriedades*

propertydescriptionrequireddefault valuetype

error

Set error state @deprecated use error prop on RadioGroup component

falseundefinedboolean

disabled

Set disabled state

falseundefinedboolean

label

Add label text

falseundefinedstring

value

Add radio value

trueundefinedstring

id

Set radio id

falseundefinedstring

*valores gerados automaticamente.

formatação

Caixa de seleção única com ícone e texto. Embaixo, mensagem de erro. No ícone,
marcador de número 1, no texto, marcador de número 2 e na mensagem de erro,
marcador de número 3.
  1. Icon: ícone para seleção da opção.
  2. Label: texto que identifica a opção.
  3. Error message: texto curto indicando um erro.

uso

É utilizado para selecionar uma única opção de um grupo pequeno de opções. Após a marcação de um item, só é possível desfazer a seleção com a seleção de outro item da lista. As opções selecionadas só são validadas após o acionamento de um botão.

grupos e alinhamento

Sempre utilizado em grupo, normalmente dentro de formulários. Usar preferencialmente na vertical para melhor leitura das opções.

Ilustração de página web com lista de 4 radio buttons. O segundo está selecionado. Botão de enviar no final da lista.
certoUse para selecionar um item da lista.
Ilustração de página web com lista de 4 radio buttons. O segundo e o terceiro estão selecionados. Botão de enviar no final da lista.
erradoNão use para selecionar mais de um item da lista.

guia de conteúdo

  • Label: escreva de maneira sucinta o item que está sendo selecionado.
  • Error message: deve ser uma frase curta, utilizando pontuação normal, de preferência no afirmativo para a recuperação do erro.

guia de design

  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Usa 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
checkedvalue
defaultCheckedvalue
disableddisabled
labellabel
onChangeonChange
namename
error