Rating

The Rating component provides an interactive way for users to provide ratings using stars or custom icons. It supports various configurations including half-star ratings, custom sizes, and different visual styles.

Examples

Basic Usage

<Rating value={3} />

Half-Star Ratings

Default stars:

Heart icons:

FO4 icons:

<Rating value={3.5} step={0.5} />

<Rating 
  value={3.5} 
  step={0.5}
  icon="heart"
  emptyIcon="heart"
  variant="error"
/>

Different Sizes

Small:

Medium:

Large:

Large (heart):

<Rating value={4} size="sm" />
<Rating value={4} size="md" />
<Rating value={4} size="lg" />
<Rating value={4} size="lg" icon="heart" emptyIcon="heart" variant="error" />

Color Variants

Default:

Primary:

Secondary:

Success:

Warning:

Error:

Info:

<Rating value={4} variant="default" />
<Rating value={4} variant="primary" />
<Rating value={4} variant="secondary" />
<Rating value={4} variant="success" />
<Rating value={4} variant="warning" />
<Rating value={4} variant="error" />
<Rating value={4} variant="info" />

Read-only and Disabled States

Read-only:

Disabled:

<Rating value={3.5} readonly={true} />
<Rating value={3.5} disabled={true} />

With Value Display

<Rating value={4} showValue={true} />

<Rating value={4} showValue={true} icon="star" variant="success" />

Hover Callback with Dynamic Content

Not rated

<script>
  let hoverRating = $state(0)

  const ratingLabels = {
    0: 'Not rated',
    1: 'Poor',
    2: 'Fair',
    3: 'Good',
    4: 'Very Good',
    5: 'Excellent'
  }

  function handleHover(event) {
    hoverRating = event.detail.value
  }
</script>

<Rating 
  value={3} 
  showPreview={true}
  onhover={handleHover}
/>
<div>{ratingLabels[hoverRating] || ratingLabels[0]}</div>

Custom Maximum

Out of 10:

Out of 10 (info):

<Rating value={7} max={10} />

<Rating value={7} max={10} icon="star" variant="info" />

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current rating value
`max`	`number`	`5`	Maximum rating value
`precision`	`number`	`1`	Step size for ratings (0.5 for half stars, 1 for whole stars)
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the rating icons
`variant`	`'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'warning'`	Visual style variant
`readonly`	`boolean`	`false`	Whether the rating is readonly
`disabled`	`boolean`	`false`	Whether the rating is disabled
`showValue`	`boolean`	`false`	Whether to show the numeric value
`icon`	`string`	Required	Custom icon for filled state (HTML or SVG string)
`emptyIcon`	`string`	Required	Custom icon for empty state (HTML or SVG string)
`name`	`string`	Required	Name attribute for form submission
`ariaLabel`	`string`	`'Rating'`	ARIA label for accessibility
`class`	`string`	`''`	Additional CSS classes
`id`	`string`	`auto-generated`	HTML id for accessibility

Events

Event	Detail Type	Description
`onchange`	`{ value: number }`	Fired when the rating value changes
`onhover`	`{ value: number }`	Fired during hover preview when showPreview is enabled

Accessibility

The Rating component follows accessibility best practices:

Uses appropriate ARIA attributes (role="slider" for interactive ratings)
Provides aria-valuemin, aria-valuemax, and aria-valuenow for screen readers
Supports keyboard navigation for selecting ratings
Proper focus states with visible indicators
Descriptive aria-valuetext (e.g., "4 out of 5")
Proper disabled and readonly states

Keyboard Interaction

Tab - Focus the rating component
ArrowRight/ArrowUp - Increase rating by step value
ArrowLeft/ArrowDown - Decrease rating by step value
Home - Set to minimum value
End - Set to maximum value