Rating

Import

import { Rating } from '@delightstack/components';

Basic Usage

View code

<Rating value={0} />

Examples

Interactive Rating

View code

<Rating value={0} tooltip="Rate this item" />

Half-Star Precision

Set precision={0.5} to allow half-star selections. The left half of each star registers a 0.5 increment.

3.5

View code

<Rating value={3.5} precision={0.5} show_value />

Read-Only Display

Use readonly to show a rating without interaction. Ideal for displaying average ratings.

4.3

View code

<Rating value={4.3} readonly show_value />

Custom Colors

Use color to override the fill color of the stars.

Custom color (error red)

2

Custom color (green)

4

View code

<script>
  import { Rating } from '@delightstack/components';

  let likes = $state(2);
</script>

<Rating bind:value={likes} max={3} color="var(--c-error, hsl(0 70% 55%))" show_value />
<Rating value={4} readonly color="hsl(140 60% 45%)" show_value />

Clearable

Allow clicking the current rating again to clear it to 0.

View code

<Rating value={3} clearable />

Sizes

View code

<Rating size="0" value={3} readonly />
<Rating size="1" value={3} readonly />
<Rating size="2" value={3} readonly />
<Rating size="3" value={3} readonly />

Custom Max

0

Rate out of 10

View code

<Rating bind:value={rating} max={10} show_value />

Props

Prop	Type	Default	Description
value	number	0	Current rating, bindable
max	number	5	Maximum number of icons
precision	0.5 | 1	1	Half or whole icon precision
size	'0' | '1' | '2' | '3'	'1'	Icon size
readonly	boolean	false	Display only, no interaction
disabled	boolean	false	Disable input
color	string	''	Override filled icon color (CSS value)
show_value	boolean	false	Show numeric value beside icons
clearable	boolean	false	Allow clicking current rating to clear (set to 0)
tooltip	string	''	Tooltip text on hover
dense	boolean	false	Tighter spacing between icons
comfortable	boolean	false	More spacing between icons
id	string	auto	Element ID
name	string	''	Form field name
class	string	''	Additional CSS classes

Events

Event	Detail	Description
onchange	{ value: number }	Rating changed
onhover	{ value: number }	Hovering over a rating value

Accessibility

• Uses role="slider" pattern on the container
• aria-valuenow, aria-valuemin, aria-valuemax set appropriately
• aria-label="Rating" for screen readers
• Keyboard navigation: Arrow Right/Up to increase, Arrow Left/Down to decrease, Home for 0, End for max
• Focus ring visible on :focus-visible
• Read-only mode prevents interaction but remains visible
• Hidden <input type="hidden"> for form submission
• Half-star precision uses CSS clip-path for clean visual rendering