Theme-aware, responsive rating component.
Change any prop and inspect the server-rendered component immediately.
page RatingExample {
state items = []
view {
<Rating
title="How was your experience?"
items="{items}"
value="4"
/>
}
}payload.Compare configurations and resize the browser to check responsive behavior.
Choose a rating from zero to five with step 1.
page RatingExample {
state items = []
view {
<Rating
title="Rate your experience"
items="{items}"
value="3"
/>
}
}Click a half star or use the precise slider and arrow keys.
page RatingExample {
state items = []
view {
<Rating
title="Half-star rating"
items="{items}"
value="3.5"
step="0.5"
/>
}
}Use increments of 0.2 for a more precise rating.
page RatingExample {
state items = []
view {
<Rating
title="Detailed score"
items="{items}"
value="4.2"
step="0.2"
readonly="true"
/>
}
}Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@inputFires as the editable value changes.@changeFires when the component's committed value or selection changes.<Rating
@input='console.log(payload)'
@change='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"Rating\"], [data-component=\"Rating\"]")
if (component) registerOutputHandler(component, "input", (payload) => {
console.log("input", payload)
})
if (component) registerOutputHandler(component, "change", (payload) => {
console.log("change", payload)
})All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
title | string | "Rating" | No |
description | string | "" | No |
items | unknown[] | [] | No |
variant | string | "default" | No |
value | number | 0 | No |
max | number | 5 | No |
step | number | 1 | No |
readonly | boolean | false | No |
disabled | boolean | false | No |
class | string | "" | No |