Rate
@xui/rateA star-rating input — hover to preview, click to set, click again to clear. Supports half stars and arrow-key adjustment; readonly renders a static score.
Install
pnpm add @xui/rate Add the barrel to a standalone component's imports:
import { XuiRateImports } from '@xui/rate';
@Component({
imports: [XuiRateImports],
// …
})Examples
Basic
Loading preview…
<div class="flex flex-col gap-4">
<xui-rate [(value)]="score" />
<span class="text-foreground-muted text-sm">Value: {{ score }}</span>
</div>Half stars
Loading preview…
<div class="flex flex-col gap-4">
<xui-rate [(value)]="score" allowHalf [starSize]="28" />
<span class="text-foreground-muted text-sm">Value: {{ score }}</span>
</div>Readonly
Loading preview…
<xui-rate [value]="4" readonly />API
A star-rating input. Two-way bindable value; supports allowHalf, allowClear (click the current value to reset), readonly/disabled, hover preview and arrow-key adjustment.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''ariaLabelstring | nullNames the control. Defaults to "Rating" so the slider is never anonymous.nullvaluenumberThe rating, from 0 to count. Halves are only reachable with allowHalf. Two-way bindable with [(value)].0countnumberHow many stars there are, and so the maximum value.5allowHalfbooleanLet a star be half-filled, halving the step for both clicks and arrow keys.falseallowClearbooleanClicking the current value again resets it to 0.truereadonlybooleanShow the rating without letting it be changed. Unlike disabled, it stays at full contrast — for displaying someone else's rating.falsedisabledbooleanBlock interaction and dim the stars.falsestarSizenumberStar size in pixels.20