---
title: "Alternar"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Alternar CSS do Tailwind usando entradas HTML nativas. Chave liga/desliga acessível com cores e tamanhos personalizados e suporte de etiqueta para configurações e formulários de preferência."
url: https://frutjam.com/pt-br/components/toggle
---

# Alternar componente

Os componentes de alternância são interruptores binários que permitem aos usuários ativar e desativar recursos ou configurações. Construídos com entradas de caixa de seleção HTML nativas e aprimorados com animações CSS do Tailwind, os alternadores fornecem uma maneira intuitiva de controlar estados booleanos. O sistema de alternância Frutjam suporta múltiplas cores, tamanhos e estados desativados – perfeito para painéis de configurações, sinalizadores de recursos e controles de preferência.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

| Aula             | Tipo    | Descrição                             |
| ---------------- | ------- | ------------------------------------- |
| toggle           | Base    | Entrada de botão liga/desliga animado |
| toggle-xs        | Tamanho | Extra pequeno                         |
| toggle-sm        | Tamanho | Pequeno                               |
| toggle-md        | Tamanho | Médio (padrão)                        |
| toggle-lg        | Tamanho | Grande                                |
| toggle-xl        | Tamanho | Extra grande                          |
| toggle-primary   | Cor     | Cor do tema principal                 |
| toggle-secondary | Cor     | Cor do tema secundário                |
| toggle-accent    | Cor     | Cor do tema de destaque               |
| toggle-neutral   | Cor     | Cor neutra do tema                    |
| toggle-info      | Cor     | Cor semântica da informação           |
| toggle-success   | Cor     | Cor semântica de sucesso              |
| toggle-warning   | Cor     | Cor semântica de aviso                |
| toggle-error     | Cor     | Cor semântica do erro                 |

## Uso Básico

## Alternar tamanhos

```html
<input type="checkbox" class="toggle toggle-xs">
<input type="checkbox" class="toggle toggle-sm">
<input type="checkbox" class="toggle toggle-md">
<input type="checkbox" class="toggle toggle-lg">
<input type="checkbox" class="toggle toggle-xl">
```

## Alternar cores

```html
<input type="checkbox" class="toggle" checked>
<input type="checkbox" class="toggle toggle-primary" checked>
<input type="checkbox" class="toggle toggle-secondary" checked>
<input type="checkbox" class="toggle toggle-accent" checked>
<input type="checkbox" class="toggle toggle-info" checked>
<input type="checkbox" class="toggle toggle-success" checked>
<input type="checkbox" class="toggle toggle-warning" checked>
<input type="checkbox" class="toggle toggle-error" checked>
```

## Alternar desativado

```html
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" disabled checked>
```

## Alternar com rótulo

```html
<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-primary" checked>
  <span>Enable notifications</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-success" checked>
  <span>Dark mode</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-warning">
  <span>Analytics</span>
</label>
```

## Alternar estados

```html
<div class="flex gap-4 items-center">
  <div>
    <p class="text-sm font-medium mb-2">Off</p>
    <input type="checkbox" class="toggle toggle-primary">
  </div>
  <div>
    <p class="text-sm font-medium mb-2">On</p>
    <input type="checkbox" class="toggle toggle-primary" checked>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Disabled</p>
    <input type="checkbox" class="toggle toggle-primary" disabled>
  </div>
</div>
```