Rating

Avaliações por estrelas para feedback do usuário e reviews.

Importação

import { Rating } from 'asterui'

Exemplos

Rating Básico

Avaliação simples de 5 estrelas sem configuração necessária.

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} />
    )
}

export default App

Limpável

Clique na mesma estrela novamente para limpar a avaliação.

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} allowClear />
    )
}

export default App

Diferentes Tamanhos

Avaliação em vários tamanhos.

import { Rating, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">xs</span><Rating size="xs" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">sm</span><Rating size="sm" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">md</span><Rating size="md" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">lg</span><Rating size="lg" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">xl</span><Rating size="xl" defaultValue={3} /></div>
      </Space>
    )
}

export default App

Meia Estrela

Permite precisão de meia estrela.

import { Rating, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">md</span><Rating defaultValue={2.5} allowHalf /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">lg</span><Rating defaultValue={2.5} allowHalf size="lg" /></div>
      </Space>
    )
}

export default App

Formato de Coração

Avaliação com ícones de coração.

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={4} mask="heart" color="bg-error" />
    )
}

export default App

Cores Customizadas

Diferentes cores para cada nível de avaliação usando Rating.Item.

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3}>
        <Rating.Item value={1} color="bg-error" />
        <Rating.Item value={2} color="bg-warning" />
        <Rating.Item value={3} color="bg-warning" />
        <Rating.Item value={4} color="bg-success" />
        <Rating.Item value={5} color="bg-success" />
      </Rating>
    )
}

export default App

Desabilitado

Exibe avaliação sem interação.

import { Rating } from 'asterui'

function App() {
  return (
      <Rating value={4} disabled />
    )
}

export default App

Contagem Customizada

Especifica um número diferente de estrelas.

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={7} count={10} />
    )
}

export default App

Rating Controlado

Controla valor de avaliação externamente.

Current rating: 0

import { Rating } from 'asterui'
import { useState } from 'react'

function App() {
  const [rating, setRating] = useState(0)
  
  return (
      <div>
        <Rating value={rating} onChange={setRating} />
        <p className="mt-2">Current rating: {rating}</p>
      </div>
    )
}

export default App

Estrela Alternativa

Estilo de estrela diferente.

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} mask="star" color="bg-success" />
    )
}

export default App

Integração com Formulário

Rating funciona com validação de Form.

import { Rating, Form, notification, Button } from 'asterui'

function App() {
  const handleSubmit = (values: { rating?: number }) => {
    notification.success({ message: 'Submitted!', description: `Rating: ${values.rating}` })
  }
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ rating: 3 }}>
        <Form.Item
          name="rating"
          label="Your rating"
          rules={{ required: 'Please provide a rating' }}
        >
          <Rating />
        </Form.Item>
        <Button htmlType="submit" color="primary">Submit</Button>
      </Form>
    )
}

export default App

API

`Rating`

Propriedade	Descrição	Tipo	Padrão
`children`	Componentes Rating.Item customizados (opcional)	`React.ReactNode`	-
`value`	Valor de avaliação controlado	`number`	-
`defaultValue`	Valor de avaliação padrão (não controlado)	`number`	`0`
`onChange`	Callback quando avaliação muda	`(value: number) => void`	-
`onHoverChange`	Callback quando valor de hover muda	`(value: number) => void`	-
`count`	Número de estrelas	`number`	`5`
`size`	Tamanho da avaliação	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`gap`	Espaço entre estrelas	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`color`	Classe de cor de fundo Tailwind	`string`	`'bg-warning'`
`mask`	Formato dos ícones de avaliação	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`allowClear`	Permite limpar avaliação clicando no mesmo valor	`boolean`	`true`
`allowHalf`	Permite seleção de meia estrela	`boolean`	`false`
`disabled`	Estado desabilitado (não interativo)	`boolean`	`false`
`className`	Classes CSS adicionais	`string`	-
`data-testid`	ID de teste para testes	`string`	-

`Rating.Item`

Propriedade	Descrição	Tipo	Padrão
`value`	Valor de avaliação que este item representa	`number`	-
`mask`	Formato do ícone de avaliação	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`color`	Classe de cor de fundo Tailwind	`string`	`'bg-warning'`
`hidden`	Item oculto para limpar avaliação	`boolean`	`false`
`half`	Posição de meia estrela	`'first' \| 'second'`	-
`className`	Classes CSS adicionais	`string`	-
`data-testid`	ID de teste para testes	`string`	-

Acessibilidade

Usa role="radiogroup" para semântica apropriada
Usa padrão de botão de rádio para seleção de avaliação
Cada estrela tem um aria-label descrevendo seu valor
Navegação por teclado entre opções de avaliação
Preview de hover mostra feedback visual antes da seleção
Estado desabilitado previne interação enquanto exibe valor