Interruptor de palanca Tailwind CSS solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs-xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de palanca son interruptores binarios que permiten a los usuarios activar y desactivar funciones o configuraciones. Construidos con entradas de casilla de verificación HTML nativas y mejorados con animaciones CSS de Tailwind, los conmutadores brindan una forma intuitiva de controlar los estados booleanos. El sistema de alternancia de Frutjam admite múltiples colores, tamaños y estados deshabilitados, perfecto para paneles de configuración, indicadores de funciones y controles de preferencias.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| toggle | Base | Entrada de interruptor de encendido/apagado animado |
| toggle-xs | Tamaño | extrapequeño |
| toggle-sm | Tamaño | Pequeño |
| toggle-md | Tamaño | Medio (predeterminado) |
| toggle-lg | Tamaño | Grande |
| toggle-xl | Tamaño | Extra grande |
| toggle-primary | Color | Color del tema principal |
| toggle-secondary | Color | Color del tema secundario |
| toggle-accent | Color | Color del tema de acento |
| toggle-neutral | Color | Color de tema neutro |
| toggle-info | Color | Color semántico de información |
| toggle-success | Color | Color semántico del éxito |
| toggle-warning | Color | Color semántico de advertencia |
| toggle-error | Color | Color semántico del error |
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 tamaños
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 colores
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 deshabilitado
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Alternar con etiqueta
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
Off
On
Disabled
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 u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Palanca según sea necesario. No más clases alucinadas.