Componente de calificación de estrellas y corazones de Tailwind CSS solo para CSS. Tallas xs-xl, soporte de media estrella, no se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de calificación permiten a los usuarios proporcionar comentarios asignando calificaciones numéricas o con estrellas a productos, servicios o contenido. Creadas con entradas HTML semánticas y estilos interactivos, las calificaciones comunican la satisfacción del usuario y comentarios de calidad. El sistema de calificación de Frutjam admite múltiples estilos, colores y tamaños, ideal para reseñas de productos, formularios de comentarios de los usuarios y encuestas de satisfacción.
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 |
|---|---|---|
| rating | Base | Contenedor para un conjunto de entradas de calificación basadas en radio |
| rate | Modificador | Elemento de entrada individual de estrella/icono |
| rating-half | Modificador | Permite la selección de media estrella. |
| rating-xs | Tamaño | Extra pequeño (estrellas 1rem) |
| rating-sm | Tamaño | Pequeño (estrellas de 1,25 rem) |
| rating-md | Tamaño | Medio (estrellas 1,5 rem, predeterminado) |
| rating-lg | Tamaño | Grande (estrellas 2rem) |
| rating-xl | Tamaño | Extra grande (estrellas de 2,5 rem) |
| rate-primary | Color | Color del tema principal |
| rate-secondary | Color | Color del tema secundario |
| rate-accent | Color | Color del tema de acento |
| rate-neutral | Color | Color de tema neutro |
| rate-info | Color | Color semántico de información |
| rate-success | Color | Color semántico del éxito |
| rate-warning | Color | Color semántico de advertencia |
| rate-error | Color | Color semántico del error |
Uso básico
1 2 3 4 5 6 7 | <div class="rating"> <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="5"> </div> |
1 2 3 4 5 6 7 | <div className="rating"> <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="5"> </div> |
Clasificación de formas
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <div class="rating"> <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="5"> </div> <div class="rating"> <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="1"> <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="2"> <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="3" checked> <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="4"> <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="5"> </div> <div class="rating"> <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="1"> <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="2"> <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="3"> <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="4" checked> <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="5"> </div> <div class="rating"> <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="1"> <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="2"> <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="3" checked> <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="4"> <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="5"> </div> <div class="rating"> <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="1"> <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="2"> <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="3" checked> <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="4"> <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="5"> </div> <div class="rating"> <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="1"> <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="2"> <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="3" checked> <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="4"> <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="5"> </div> <div class="rating"> <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="1"> <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="2"> <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="3" checked> <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="4"> <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="5"> </div> |
Media calificación
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <div class="rating rating-half"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="0.5"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1.5"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2.5" checked> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3.5"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4.5"> <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="5"> </div> <div class="rating rating-half"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="0.5"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1.5"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2.5"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3" checked> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3.5"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4.5"> <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="5"> </div> <div class="rating rating-half"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="0.5"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1.5"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2.5" checked> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3.5"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4.5"> <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="5"> </div> |
Sólo visualización
Utilice aria-checked="true" en el último elemento completado: CSS completa todo lo anterior automáticamente.
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div class="rating" aria-label="3 out of 5 stars"> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> </div> <div class="rating" aria-label="4 out of 5 hearts"> <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div> <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div> <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div> <div class="rate mask mask-heart rate-error" role="radio" aria-checked="true"></div> <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div> </div> <div class="rating rating-half" aria-label="2.5 out of 5 stars"> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> </div> |
Colores de calificación
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <div class="rating"> <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="1"> <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="2"> <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="3"> <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="4" checked> <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="5"> </div> <div class="rating"> <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="1"> <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="2"> <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="3" checked> <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="4"> <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="5"> </div> <div class="rating"> <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="1"> <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="2"> <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="3" checked> <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="4"> <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="5"> </div> <div class="rating"> <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="1"> <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="2"> <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="3" checked> <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="4"> <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="5"> </div> <div class="rating"> <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="1"> <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="2"> <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="3" checked> <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="4"> <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="5"> </div> <div class="rating"> <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="1"> <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="2"> <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="3" checked> <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="4"> <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="5"> </div> <div class="rating"> <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="5"> </div> <div class="rating"> <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="1"> <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="2"> <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="3" checked> <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="4"> <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="5"> </div> |
Tamaños de calificación
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <div class="rating rating-xs"> <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="5"> </div> <div class="rating rating-sm"> <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="5"> </div> <div class="rating rating-md"> <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="5"> </div> <div class="rating rating-lg"> <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="5"> </div> <div class="rating rating-xl"> <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="3" checked> <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="5"> </div> |
Clasificación de sólo lectura
html
1 2 3 4 5 6 7 8 9 10 | <div class="flex gap-2 items-center"> <div class="rating rating-sm" aria-label="5 out of 5 stars"> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div> <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div> </div> <span class="text-sm">5 out of 5</span> </div> |
Calificación con etiqueta
html
1 2 3 4 5 6 7 8 9 10 | <label> <span class="block text-sm font-medium mb-2">Rate your experience</span> <div class="rating"> <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="1"> <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="2"> <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="3"> <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="4"> <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="5"> </div> </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 Clasificación según sea necesario. No más clases alucinadas.