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)

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