Radio

Apresentação

O componente Radio é responsável por criar botões de rádio que permitem seleção única em um conjunto de opções. É ideal para formulários onde apenas uma opção pode ser selecionada por vez, garantindo escolhas mutuamente exclusivas.

Quando usar

• Em formulários com opções mutuamente exclusivas
• Para seleção de gênero ou estado civil
• Em preferências de usuário com uma única escolha
• Para escolhas simples entre 2-7 opções
• Em questionários com resposta única
• Para seleção de método de pagamento
• Para escolher configurações de sistema
• Em filtros com opção única
• Para seleção de idioma
• Em enquetes com uma resposta

Quando não usar

• Para seleção múltipla (use Checkbox)
• Em situações onde um Select é mais apropriado (muitas opções)
• Quando as opções são muito numerosas (mais de 7)
• Para valores booleanos simples (use Toggle ou Checkbox)

Forma básica de uso

import { Radio } from 'eitri-luminus';

// Radio básico
<Radio name="opcoes" value="opcao1" />

// Radio com diferentes tamanhos
<Radio name="opcoes" value="opcao1" className="radio-xs" />
<Radio name="opcoes" value="opcao2" className="radio-sm" />
<Radio name="opcoes" value="opcao3" className="radio-md" />
<Radio name="opcoes" value="opcao4" className="radio-lg" />

// Radio com diferentes cores
<Radio name="opcoes" value="opcao1" className="radio-primary" />
<Radio name="opcoes" value="opcao2" className="radio-secondary" />
<Radio name="opcoes" value="opcao3" className="radio-accent" />
<Radio name="opcoes" value="opcao4" className="radio-success" />
<Radio name="opcoes" value="opcao5" className="radio-warning" />
<Radio name="opcoes" value="opcao6" className="radio-error" />
<Radio name="opcoes" value="opcao7" className="radio-info" />

// Radio desabilitado
<Radio name="opcoes" value="opcao1" disabled />

// Radio selecionado por padrão
<Radio name="opcoes" value="opcao1" defaultChecked />

// Radio com evento de mudança
<Radio 
  name="opcoes" 
  value="opcao1" 
  onChange={(e) => console.log(e.target.value)} 
/>

// Grupo de radios com labels
<div className="form-control">
  <label className="label cursor-pointer">
    <span className="label-text">Opção 1</span>
    <Radio name="grupo" value="1" />
  </label>
  <label className="label cursor-pointer">
    <span className="label-text">Opção 2</span>
    <Radio name="grupo" value="2" />
  </label>
  <label className="label cursor-pointer">
    <span className="label-text">Opção 3</span>
    <Radio name="grupo" value="3" />
  </label>
</div>

// Radio controlado com estado
const [selectedOption, setSelectedOption] = useState('');

<Radio 
  name="opcoes" 
  value="opcao1" 
  checked={selectedOption === 'opcao1'}
  onChange={() => setSelectedOption('opcao1')}
/>

Propriedades

O componente Radio herda todas as propriedades de um input HTML padrão, exceto 'type', 'dangerouslySetInnerHTML' e 'children', além das propriedades comuns da biblioteca. As principais propriedades incluem:

Propriedade	Tipo	Descrição
checked	boolean	Estado de seleção do radio
defaultChecked	boolean	Estado inicial de seleção
disabled	boolean	Desabilita o radio
name	string	Nome do grupo de radios
value	string	Valor do radio
onChange	function	Função chamada ao mudar o estado
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Radio herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente Radio expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Radio } from 'eitri-luminus';

function MyComponent() {
  const radioRef = useRef<Radio>(null);

  const handleGetValue = () => {
    const isChecked = radioRef.current?.getValue();
    console.log('Radio está marcado:', isChecked);
  };

  const handleSetValue = () => {
    radioRef.current?.setValue(true);
  };

  const handleToggle = () => {
    radioRef.current?.toggle();
  };

  return (
    <>
      <Radio ref={radioRef} name="opcoes" value="opcao1" />
      <button onClick={handleGetValue}>Verificar valor</button>
      <button onClick={handleSetValue}>Marcar</button>
      <button onClick={handleToggle}>Alternar</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
getValue()	boolean	Retorna se o radio está marcado
setValue(checked: boolean)	void	Define se o radio está marcado
toggle()	void	Alterna o estado do radio

Observações

• O componente usa a classe 'radio' para estilização base
• Suporta diferentes tamanhos (xs, sm, md, lg)
• Suporta diferentes cores (primary, secondary, accent, success, warning, error, info)
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Deve ser usado em grupos com o mesmo atributo 'name'
• Apenas um radio por grupo pode ser selecionado
• É especialmente útil para seleções únicas
• Pode ser combinado com outros componentes
• Suporta estados desabilitado e selecionado
• Mantém o tipo "radio" por padrão
• Pode ser usado em formulários
• Suporta validação de formulários
• Recomendado para 2-7 opções por grupo
• Para mais opções, considere usar Select
• Métodos via ref disponíveis para controle programático do radio