Renders a star rating.

Examples

<.rating value={4} />
<.rating name="score" value={@score} interactive phx-change="rate" />

Accessibility

A read-only rating is a single img-role element with a text alternative ("4 out of 5 stars"), so a screen reader announces the rating once rather than reading five separate stars.

An interactive rating is a radiogroup of real radio inputs — keyboard-navigable with arrow keys for free, and submits without JavaScript. Alpine only drives the hover preview.

Attributes

• id (:string) - Defaults to nil.
• value (:integer) - Defaults to 0.
• max (:integer) - Defaults to 5.
• name (:string) - Emits a hidden input so the rating submits with a form. Defaults to nil.
• interactive (:boolean) - Allows the user to set the rating. Read-only display otherwise. Defaults to false.
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• label (:string) - Defaults to nil.
• show_value (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.