Rating

SRating is a star rating. It is built on Reka UI Rating (the radiogroup role, keyboard/mouse selection). The stars are a reused SIcon; filled ones are highlighted with the accent color (gold by default), and the item under the cursor grows slightly. The value is bound with v-model.

Basic usage

Size

size takes a token (sm 16px / md 20px / lg 24px) or a number of pixels — the value goes to SIcon, so the scale is the same as for the library icons.

Custom item icon

icon sets the shape of an empty item, selected-icon the shape of a selected one (a registry name or a raw SVG path). Here the star is replaced with a red heart.

Half ratings

The allow-half prop allows a step of 0.5 — you can select and display half a star (for example, an average rating of 3.5).

Clearing the rating

The clearable prop lets the user reset the rating to 0 by clicking the current star again.

Read-only and disabled

readonly shows the rating without letting the user change it, disabled also dims the control and blocks interaction.

Color

The color prop sets the star color from the palette. The default is gold amber; hearts and "likes" usually use red.

API

Props

Name	Type	Default	Description
color	string	undefined	Star color: a name from the palette (primary/teal/teal-10). Gold amber by default.
size	number | "md" | "sm" | "lg"	"md"	Item size: a token (sm 16px / md 20px / lg 24px) or a number of pixels.
length	number	5	Number of items (stars).
readonly	boolean	false	Read-only: shows the rating without letting the user change it.
disabled	boolean	false	Disables interaction.
allow-half	boolean	false	Allows half ratings (step 0.5).
clearable	boolean	false	Clicking the current rating again resets it to 0.
icon	string	"star"	Item icon (registry name or raw path).
selected-icon	string	"star"	Icon of a selected/filled item (registry name or raw path).
aria-label	string	undefined	Accessible name of the rating (aria-label).
model-value	number	0	Current rating (a number). Two-way bound via v-model.

Events

Name	Signature	Description
update:modelValue	(value: number) => void	Emitted when modelValue changes. Used for two-way binding (v-model).