Toggle

Apresentação

O componente Toggle é responsável por criar um interruptor (switch) que permite aos usuários alternar entre dois estados (ligado/desligado). É ideal para configurações binárias, como ativar/desativar funcionalidades, ligar/desligar notificações ou alternar entre modos.

Quando usar

• Para alternar configurações
• Para ativar/desativar funcionalidades
• Para ligar/desligar notificações
• Para alternar entre modos
• Para ativar/desativar serviços
• Para alternar entre temas
• Para ativar/desativar recursos
• Para alternar entre estados
• Para ativar/desativar opções
• Para alternar entre visibilidades

Forma básica de uso

import { Toggle } from 'eitri-luminus';

// Toggle básico
<Toggle />

// Toggle com valor inicial
<Toggle defaultChecked />

// Toggle com evento onChange
<Toggle 
  onChange={(e) => console.log(e.target.checked)}
/>

// Toggle com classes personalizadas
<Toggle 
  className="toggle-primary"
/>

// Toggle desabilitado
<Toggle 
  disabled
/>

// Toggle com valor controlado
const [checked, setChecked] = useState(false);
<Toggle 
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

// Toggle com label
<div className="flex items-center gap-2">
  <Toggle id="notificacoes" />
  <label htmlFor="notificacoes">Receber notificações</label>
</div>

// Toggle com diferentes tamanhos
<div className="flex flex-col gap-4">
  <Toggle className="toggle-xs" />
  <Toggle className="toggle-sm" />
  <Toggle className="toggle-md" />
  <Toggle className="toggle-lg" />
</div>

// Toggle com diferentes cores
<div className="flex flex-col gap-4">
  <Toggle className="toggle-primary" />
  <Toggle className="toggle-secondary" />
  <Toggle className="toggle-accent" />
  <Toggle className="toggle-success" />
  <Toggle className="toggle-warning" />
  <Toggle className="toggle-error" />
</div>

Propriedades

Propriedade	Tipo	Descrição
checked	boolean	Estado atual (controlado)
defaultChecked	boolean	Estado inicial
disabled	boolean	Desabilita o toggle
onChange	function	Função chamada quando o estado muda
className	string	Classes CSS adicionais
id	string	Identificador único do componente
name	string	Nome do campo no formulário

Heranças

O componente Toggle 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 Toggle expõe métodos públicos que podem ser acessados através de uma ref:

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

function MyComponent() {
  const toggleRef = useRef<Toggle>(null);

  const handleGetValue = () => {
    const isChecked = toggleRef.current?.getValue();
    console.log('Toggle está ligado:', isChecked);
  };

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

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

  return (
    <>
      <Toggle ref={toggleRef} />
      <button onClick={handleGetValue}>Verificar valor</button>
      <button onClick={handleSetValue}>Ligar</button>
      <button onClick={handleToggle}>Alternar</button>
    </>
  );
}

Métodos Disponíveis

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

Observações

• O componente usa a classe 'toggle' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Suporta estados controlados e não controlados
• Pode ser desabilitado
• Suporta eventos de mudança
• Pode ser estilizado com diferentes cores
• Mantém a acessibilidade por padrão
• Pode ser usado em formulários
• Suporta diferentes tamanhos
• Pode ser combinado com labels
• Suporta diferentes estilos
• Pode ser usado em layouts flexíveis
• Métodos via ref disponíveis para controle programático do toggle