Radio

Os componentes Radio são geralmente usados em grupos/coleções de botões de rádio que descrevem um conjunto de opções relacionadas.

Apenas um botão de opção em um determinado grupo pode ser selecionado ao mesmo tempo.

Importação

import { Radio } from '@escaletech/delta'

Utilização

Editor de código

<div style={{background: 'white', padding: '20px'}}> <Radio id="option-a" label="Opção A" /> </div>

<div style={{background: 'white', padding: '20px'}}>
  <Radio id="option-a" label="Opção A" />
</div>

Resultado

Loading...

Desabilitado

Passe a propriedade disabled para mostrar que o input está desabilitado. Por padrão é false.

Editor de código

<div style={{background: 'white', padding: '20px'}}> <Radio id="option-a" name='doc' label="Opção A" /> <hr /> <Radio id="option-b" name='doc' label="Opção B" /> <hr /> <Radio id="option-disabled" name='doc' label="Opção Desabilitada" disabled /> </div>

  <div style={{background: 'white', padding: '20px'}}>
    <Radio id="option-a" name='doc' label="Opção A" />
    <hr />
    <Radio id="option-b" name='doc' label="Opção B" />
    <hr />
    <Radio id="option-disabled" name='doc' label="Opção Desabilitada" disabled />
  </div>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    // customiza as cores de fundo e texto do componente
    formFieldBackgroundColorDisabled: 'red',
    inputSuccessColor: 'white'
  },
  fonts: {
    // customiza a familia de fonte do componente
    formFieldFontFamily: 'Georgia'
  }
})

Tokens

Token	Descrição
colors.formFieldBackgroundColorDisabled	Cor de fundo quando o componente está desabilitado
colors.formFieldBorderColor	Cor da borda do componente
colors.formFieldBorderColorHover	Cor da borda quando o cursor do mouse está sobre o componente
colors.formFieldBorderColorInputed	Cor da borda quando o componente está em foco
colors.formFieldBorderColorDisabled	Cor da borda quando o componente está desabilitado
colors.formFieldLabelColorDisabled	Cor do texto quando o componente está desabilitado
colors.inputLabelColor	Cor do texto da label do componente
colors.inputLabelColorDisabled	Cor do texto da label do componente quando o componente está desabilitado
fonts.formFieldFontFamily	Família de fontes de texto do componente

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
id	Define o id do componente para que ao clicar na label seja selecionado	string	-	✅
label	Define o texto da label do componente	string	-	✅
disabled	Se for true, o componente será desabilitado.	boolean	false	❌

Aceita todos as propriedades suportados por inputs do tipo radio nativos.