SnippetUI
← Back to snippets

Toggle Switch Personalizado

Exemplo de implementação de um belo interruptor de alternância (toggle switch) animado, que substitui com elegância as caixas de seleção (checkboxes) padrão.

HTMLCSS

Um snippet que substitui as caixas de seleção nativas por interruptores de alternância (toggle switches) modernos e esteticamente agradáveis. Utilizando pseudo-elementos do CSS e a pseudo-classe :checked, proporciona animações suaves totalmente livres de JavaScript.

Código

<label class="custom-toggle">
  <input type="checkbox" class="custom-toggle-input" aria-label="Toggle Switch" />
  <span class="custom-toggle-slider"></span>
</label>
/* Contêiner do toggle switch */
.custom-toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Ocultar a caixa de seleção padrão */
.custom-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Fundo do controle deslizante */
.custom-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2e8f0;
  transition: background-color 0.4s;
  border-radius: 34px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Manipulador do controle deslizante */
.custom-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Cor de fundo quando marcado */
.custom-toggle-input:checked + .custom-toggle-slider {
  background-color: #3b82f6;
}

/* Contorno durante o foco do teclado */
.custom-toggle-input:focus-visible + .custom-toggle-slider {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Movimento do manipulador quando marcado */
.custom-toggle-input:checked + .custom-toggle-slider:before {
  transform: translateX(26px);
}

Pontos de Implementação

Uma vez que o <input type="checkbox"> nativo apresenta variações de estilo entre navegadores e limita as possibilidades de personalização, este snippet oculta a caixa de seleção padrão e constrói o visual desejado através do elemento <span> adjacente (o controle deslizante).

  1. Ocultar a caixa de seleção nativa: Aplicar opacity: 0 com largura e altura iguais a 0 torna o elemento invisível, preservando totalmente a sua funcionalidade técnica e acessibilidade.
  2. Estilização do controle deslizante: O pseudo-elemento ::before é encarregado de desenhar o círculo que atua como o manipulador do interruptor.
  3. Animação suave: A regra transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) aplica uma função de easing refinada, conferindo um leve salto (bounce) ao movimento do controle.
  4. Considerações de acessibilidade: A propriedade :focus-visible é utilizada para realçar o anel de foco, garantindo clareza e usabilidade durante a navegação via teclado.

Este interruptor é perfeito para interfaces que exigem operações intuitivas de liga/desliga, como painéis de configurações ou alternadores de modo escuro.