Rating
Avaliação com estrelas para dar uma nota ou mostrar uma média. Interativo, funciona como um grupo de rádios; somente leitura, é uma única imagem com nome em texto e aceita meias estrelas.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o componente. O estilo carregado desenha as estrelas.
import { Rating } from "@camaleo/react";Anatomia
Interativo, a raiz é um grupo de rádios com um rádio por estrela. Somente leitura, a raiz é uma imagem e cada estrela é só uma forma.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
4,8 · 128 avaliações
Somente leitura, com o número
O readOnly transforma as estrelas numa única imagem com o nome do getLabel. Escreva a média e o total ao lado, para todo mundo comparar de relance.
Tênis de trilha
Segunda pele de merino
Garrafa térmica, 750 ml
Meias estrelas
Na leitura, qualquer fração vira meia estrela, então 4,5 e 3,5 ficam diferentes. A versão interativa só aceita estrelas inteiras.
Escolha uma estrela
Com legenda
Escolha uma estrela. Palavras como "Boa" ou "Excelente" na legenda e no nome de cada estrela dizem o que a nota significa.
Obrigatório numa avaliação
Envie sem estrela. Confira o valor no envio e mostre um FieldError; dentro de um Field a mensagem fica ligada ao grupo.
Avalie suas últimas compras
Tênis de trilha
Segunda pele de merino
Garrafa térmica, 750 ml
Várias na mesma tela
Quando cada linha da lista tem uma nota, dê a cada uma um aria-label com o nome do item, senão o leitor de tela repete "Sua avaliação" três vezes.
Você pode avaliar depois da entrega, em 31/10/2026.
Desativado, com motivo
Diga quando a avaliação abre. Uma fileira de estrelas cinza sem explicação parece quebrada.
Tamanhos
Defina --cml-star-size no rating: pequeno em listas e cards, grande quando dar a nota é a tarefa inteira.
Em contexto
Notas aparecem em avaliações, cards e pesquisas depois do atendimento. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Tênis de trilha Serra
4,8 · 128 avaliações
Como foi o atendimento da Marina?
Sua conversa sobre um reembolso atrasado foi encerrada hoje às 14h40.
O que ajudou?
Boas práticas
4,8 · 128 avaliações
"4,8 · 128 avaliações" é preciso e diz quanto dá para confiar.
Ninguém distingue 4,6 de 4,8, e uma avaliação parece tão sólida quanto cem.
Uma escala curta é rápida de escolher e fácil de ler depois.
A diferença entre 6 e 7 não quer dizer nada, e os alvos ficam pequenos.
Props
0 quer dizer nenhuma estrela escolhida.Dentro de um Field, o rótulo dá nome ao grupo, e disabled e name também podem vir de lá. Os outros atributos do grupo de rádios são repassados.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio rating.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Só deste componente
/* estrelas douradas, só nos cards de produto */
.product-card [data-slot="rating"] {
--cml-star-color: var(--cml-warning);
}Acessibilidade
- Interativo, é um grupo de rádios: uma parada de Tab, e cada estrela é um rádio com o nome do getLabel, como "4 de 5 estrelas".
- Somente leitura, é um único role="img" com o getLabel como nome, então o leitor de tela ouve "Nota 4,8 de 5" uma vez, e não cinco formas.
- Dê nome ao grupo: um FieldLabel dentro de um Field, ou aria-label quando ele está sozinho. O id vai para a primeira estrela, então um link do ErrorSummary consegue focá-la.
- Estrelas preenchidas mudam de forma e preenchimento, não só de cor, e cada alvo tem pelo menos 24 × 24 px.