Rating

Star ratings for user feedback and reviews.

Import

import { Rating } from 'asterui'

Examples

Basic Rating

Simple 5-star rating with no configuration needed.

import { Rating } from 'asterui'

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

export default App

Clearable

Click the same star again to clear the rating.

import { Rating } from 'asterui'

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

export default App

Different Sizes

Rating in various sizes.

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

Half Star

Allow half-star precision.

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

Heart Shape

Rating with heart icons.

import { Rating } from 'asterui'

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

export default App

Custom Colors

Different colors for each rating level using 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

Disabled

Display rating without interaction.

import { Rating } from 'asterui'

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

export default App

Custom Count

Specify a different number of stars.

import { Rating } from 'asterui'

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

export default App

Controlled Rating

Control rating value externally.

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

Alternative Star

Different star style.

import { Rating } from 'asterui'

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

export default App

Form Integration

Rating works with Form validation.

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`

Property	Description	Type	Default
`children`	Custom Rating.Item components (optional)	`React.ReactNode`	-
`value`	Controlled rating value	`number`	-
`defaultValue`	Default rating value (uncontrolled)	`number`	`0`
`onChange`	Callback when rating changes	`(value: number) => void`	-
`onHoverChange`	Callback when hover value changes	`(value: number) => void`	-
`count`	Number of stars	`number`	`5`
`size`	Rating size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`gap`	Space between stars	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`color`	Tailwind background color class	`string`	`'bg-warning'`
`mask`	Shape of the rating icons	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`allowClear`	Allow clearing rating by clicking same value	`boolean`	`true`
`allowHalf`	Allow half-star selection	`boolean`	`false`
`disabled`	Disabled state (non-interactive)	`boolean`	`false`
`className`	Additional CSS classes	`string`	-
`data-testid`	Test ID for testing	`string`	-

`Rating.Item`

Property	Description	Type	Default
`value`	Rating value this item represents	`number`	-
`mask`	Shape of the rating icon	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`color`	Tailwind background color class	`string`	`'bg-warning'`
`hidden`	Hidden item for clearing rating	`boolean`	`false`
`half`	Half-star position	`'first' \| 'second'`	-
`className`	Additional CSS classes	`string`	-
`data-testid`	Test ID for testing	`string`	-

Accessibility

Uses role="radiogroup" for proper semantics
Uses radio button pattern for rating selection
Each star has an aria-label describing its value
Keyboard navigation between rating options
Hover preview shows visual feedback before selection
Disabled state prevents interaction while displaying value