Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de casilla de verificación

Última actualización:

Casilla de verificación Tailwind CSS solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs-xl, estado indeterminado. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de casilla de verificación permiten a los usuarios seleccionar una o varias opciones de un conjunto. Construidas con elementos de entrada HTML nativos y mejoradas con Tailwind CSS, las casillas de verificación admiten múltiples tamaños, colores y estados. Totalmente accesible con navegación por teclado y compatibilidad con lectores de pantalla, las casillas de verificación funcionan perfectamente en formularios, opciones de filtro e interfaces de administración de permisos.

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
checkboxBaseEntrada de casilla de verificación con estilo
checkbox-circleEstiloCasilla de verificación completamente circular
checkbox-roundedEstiloCasilla de verificación moderadamente redondeada
checkbox-squareEstiloCasilla de verificación cuadrada sin redondeo
checkbox-disabledModificadorApariencia deshabilitada para elementos que no son de entrada
checkbox-xsTamañoextrapequeño
checkbox-smTamañoPequeño
checkbox-mdTamañoMedio (predeterminado)
checkbox-lgTamañoGrande
checkbox-xlTamañoExtra grande
checkbox-2xlTamaño2× extra grande
checkbox-primaryColorColor del tema principal
checkbox-secondaryColorColor del tema secundario
checkbox-accentColorColor del tema de acento
checkbox-neutralColorColor de tema neutro
checkbox-infoColorColor semántico de información
checkbox-successColorColor semántico del éxito
checkbox-warningColorColor semántico de advertencia
checkbox-errorColorColor semántico del error

Uso básico

<input type="checkbox" checked="checked" class="checkbox">

<input type="checkbox" checked="checked" className="checkbox">

Tamaños de casillas de verificación

html 
1
2
3
4
5
6
<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">
<input type="checkbox" checked="checked" class="checkbox checkbox-2xl">

Colores de casilla de verificación

html 
1
2
3
4
5
6
7
8
9
<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">

Casillas de verificación deshabilitadas

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

Formas de casilla de verificación

Casilla de verificación cuadrada

html 
<input type="checkbox" class="checkbox checkbox-square" checked="checked">

Casilla de verificación circular/redondeada

Las clases checkbox-circle y checkbox-rounded dan como resultado el mismo estilo visual, lo que permite convenciones de nomenclatura flexibles.

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">

Casillas de verificación con etiquetas

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked">
<label for="newsletter">Subscribe to our newsletter</label>

¿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 Caja según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP