Rating
Rating — a row of stars, or of any icon you give it.
Walkthrough
1. Basic
Hover to preview, press to choose — the chosen star pops. It is one slider: the arrows step it, Home and End go to the ends, a digit jumps there.
<script lang="ts"> import { Rating } from 'omaris'; let rating = $state(4);</script><Rating label="Rate your order" bind:value={rating} />2. Half and readonly
allowHalf makes the starting half of a star the half-point. readonly is a display that fills fractionally — an average of 4.3 shows a third of a star.
4.3 · 212 reviews
<script lang="ts"> import { Rating, Text } from 'omaris'; let half = $state(3.5);</script><div class="flex flex-col items-start gap-4"> <Rating allowHalf label="Half stars" bind:value={half} /> <div class="flex items-center gap-2"> <Rating readonly value={4.3} size="sm" label="Average rating" /> <Text variant="body-sm" tone="muted" tabular>4.3 · 212 reviews</Text> </div></div>3. Icons and tones
Any icon, painted with currentColor — it is drawn twice, unfilled and filled. tone colours the filled one; size runs 20 / 24 / 32px.
<script lang="ts"> import { Rating } from 'omaris'; let love = $state(3); let spice = $state(2);</script>{#snippet heart()} ...{/snippet}{#snippet flame()} ...{/snippet}<div class="flex flex-col items-start gap-4"> <Rating icon={heart} tone="destructive" size="lg" label="How much you love it" bind:value={love} /> <Rating icon={flame} tone="warning" max={3} label="Spice level" bind:value={spice} /></div>4. Overridden
Ten stars in a narrow box: the caller trims the finger padding so the row fits a phone, recolours both layers, and names it with its own aria-label — which wins over the component's.
<script lang="ts"> import { Rating } from 'omaris'; let score = $state(7);</script><div class="w-64 max-w-full"> <Rating max={10} size="sm" aria-label="Score out of ten" classes={{ item: 'pointer-coarse:p-0.5', icon: 'text-muted-foreground/40', fill: 'text-success' }} bind:value={score} /></div>