Rating

Componente de avaliação com estrelas que permite ao usuário dar feedback ou exibir avaliações.

Exemplos

Básico

Meias estrelas

Com labels

Somente leitura

Número máximo de estrelas personalizado

API

Rating

O componente Rating funciona nos modos controlado e não controlado:

• Controlado: passe value e onChange para gerenciar o estado de fora.
• Não controlado: omita value e o componente gerencia o próprio estado interno. Você ainda pode usar onChange para ser avisado das mudanças.

Propriedade	Tipo	Padrão	Descrição
value	number	-	Valor atual da avaliação (de 0 a maxStars, aceita incrementos de 0.5 para meias estrelas). Quando informado, o componente é controlado.
onChange	(value: number) => void	-	Função chamada quando o usuário clica em uma estrela. Funciona nos modos controlado e não controlado.
maxStars	number	5	Número máximo de estrelas exibidas.
readOnly	boolean	false	Quando true, impede o usuário de interagir com a avaliação.
labels	[string, string]	-	Labels exibidos abaixo das estrelas. O primeiro aparece à esquerda e o segundo, à direita.
size	"sm" | "md" | "lg"	"md"	Tamanho das estrelas.
className	string	-	Classes CSS adicionais aplicadas ao elemento raiz.
classNameContainer	string	-	Classes CSS adicionais aplicadas ao container das estrelas.
classNameLabels	string	-	Classes CSS adicionais aplicadas ao container dos labels.
label	string	"Avaliação"	Nome acessível do grupo de rádio interativo. As setas do teclado mudam o valor.
getValueLabel	(value: number, maxStars: number) => string	(value, max) => `Nota ${value} de ${max}`	Monta o label acessível de cada estrela e, quando readOnly, da avaliação inteira (exposta como role="img").

Estados da estrela

Estado	Descrição
empty	Estrela com fundo transparente e borda gray-stroke-emphasis.
half	Estrela preenchida pela metade com a cor feedback-warning-background-soft.
full	Estrela totalmente preenchida com a cor feedback-warning-background-soft.