Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Alternar componente

Última actualización:

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
toggleBaseEntrada de interruptor de encendido/apagado animado
toggle-xsTamañoextrapequeño
toggle-smTamañoPequeño
toggle-mdTamañoMedio (predeterminado)
toggle-lgTamañoGrande
toggle-xlTamañoExtra grande
toggle-primaryColorColor del tema principal
toggle-secondaryColorColor del tema secundario
toggle-accentColorColor del tema de acento
toggle-neutralColorColor de tema neutro
toggle-infoColorColor semántico de información
toggle-successColorColor semántico del éxito
toggle-warningColorColor semántico de advertencia
toggle-errorColorColor 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

html 
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

html 
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

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

Alternar con etiqueta

html 
 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

html 
 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.

Pruebe Cherry MCP