Componente de classificação de estrela e coração do Tailwind CSS somente CSS. Tamanhos xs-xl, suporte meia estrela, sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes de classificação permitem que os usuários forneçam feedback atribuindo classificações com estrelas ou numéricas a produtos, serviços ou conteúdo. Construídas com entradas HTML semânticas e estilo interativo, as classificações comunicam a satisfação do usuário e feedback de qualidade. O sistema de classificação Frutjam oferece suporte a vários estilos, cores e tamanhos – ideal para análises de produtos, formulários de feedback de usuários e pesquisas de satisfação.
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 |
|---|---|---|
| rating | Base | Contêiner para um conjunto de entradas de classificação baseadas em rádio |
| rate | Modificador | Elemento de entrada individual de estrela/ícone |
| rating-half | Modificador | Permite seleção de meia estrela |
| rating-xs | Tamanho | Extra pequeno (1rem estrelas) |
| rating-sm | Tamanho | Pequeno (estrelas de 1,25 rem) |
| rating-md | Tamanho | Médio (estrelas de 1,5 rem, padrão) |
| rating-lg | Tamanho | Grande (2 estrelas rem) |
| rating-xl | Tamanho | Extra grande (estrelas de 2,5 rem) |
| rate-primary | Cor | Cor do tema principal |
| rate-secondary | Cor | Cor do tema secundário |
| rate-accent | Cor | Cor do tema de destaque |
| rate-neutral | Cor | Cor neutra do tema |
| rate-info | Cor | Cor semântica da informação |
| rate-success | Cor | Cor semântica de sucesso |
| rate-warning | Cor | Cor semântica de aviso |
| rate-error | Cor | Cor semântica do erro |
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> |
Formas de classificação
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> |
Meia classificação
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> |
Somente exibição
Use aria-checked="true" no último item preenchido — o CSS preenche todos os anteriores automaticamente.
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> |
Classificação de cores
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> |
Tamanhos de classificação
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> |
Classificação somente leitura
5 out of 5
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> |
Classificação com 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 ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Avaliação e a estrutura sob demanda. Chega de aulas alucinadas.