Chave seletora Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs-xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
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
1 2 | <input type="checkbox" class="toggle"> <input type="checkbox" class="toggle" checked> |
1 2 | <input type="checkbox" className="toggle"> <input type="checkbox" className="toggle" checked> |
Alternar tamanhos
1 2 3 4 5 | <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
1 2 3 4 5 6 7 8 | <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
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Alternar com rótulo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
Usando Claude Code, Cursor ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Alternar e a estrutura sob demanda. Chega de aulas alucinadas.