Campos de entrada

Sliding Thumb Switch

Um botão liga/desliga construído a partir de uma caixa de seleção oculta: uma faixa de pílula que muda de cor e um polegar redondo que desliza para a borda oposta.

Wi-Fi

Auto-sync

Como usar Sliding Thumb Switch

Um botão liga/desliga construído a partir de uma caixa de seleção oculta: uma faixa de pílula que muda de cor e um polegar redondo que desliza para a borda oposta.

Teste a prévia com o mouse e o teclado. Verifique o foco visível e o layout em telas estreitas na sua página. Informe o número ou o identificador do componente ao seu agente de programação.

Propriedades: checked, accentColor, disabled

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

2802Settings toggle switchCampos de entradaUm pequeno botão liga / desliga com um botão deslizante que muda uma única configuração, sua trilha vai de silenciado a um acento sólido enquanto o botão se estica como um elástico se pressionado no meio do deslizamento.

2771Layout toggle switchCampos de entradaUma chave cujo botão cruza a trilha animando uma mudança de layout real em vez de uma tradução, para que o lançamento permaneça exato em qualquer largura da trilha.

2759Bounce drop toggleCampos de entradaUma chave seletora vertical alta cuja bola cai para o fundo com um movimento saltitante quando desligada e desliza de volta para cima com uma mola apertada quando ligada.

2343Drawn check checkboxCampos de entradaUma caixa de seleção cuja marca de seleção se desenha traço por traço à medida que a caixa é preenchida com uma cor sólida de destaque.

1954Elastic toggle switchCampos de entradaUm botão de alternância de pílula cujo polegar redondo se comprime em uma bolha enquanto pressionado e volta a girar com um salto suave, deslizando entre um estado neutro desligado e um preenchimento de destaque sólido.

1980Icon crossfade switchCampos de entradaUm botão de alternância cujo ícone de polegar desaparece e se transforma em um ícone diferente conforme o botão alterna entre desligado e ligado.