Rating

<NaviusRating @bind-Value="_rating" AllowHalf class="inline-flex gap-1">
    @for (var i = 0; i < 5; i++)
    {
        <NaviusRatingItem class="group relative h-7 w-7">
            <StarOutline class="text-muted-foreground/25" />
            <span class="absolute inset-0 w-0 overflow-hidden
                         group-data-[state=full]:w-full group-data-[state=half]:w-1/2">
                <StarFilled class="text-amber-400" />
            </span>
        </NaviusRatingItem>
    }
</NaviusRating>

@code { private decimal? _rating = 3.5m; }

Features

• A role="radiogroup" of role="radio" stars with roving tabindex; the value logic lives on the root, so arrows move focus and value together.
• AllowHalf adds pointer half-zones and 0.5 keyboard steps; each star paints from data-state (full / half / empty), computed from the hover preview or the committed value.
• AllowClear lets re-selecting the current value (or arrowing below 1) clear to unrated; Label supplies each star's accessible name.
• Controlled via @bind-Value (a decimal?), uncontrolled via DefaultValue; a hidden input mirrors the value into form submission when Name is set.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add rating

Anatomy

Provide your own star items, or let the root auto-render Max of them when you give it no children.

@using Navius.Primitives.Components.Rating

@* Auto-rendered stars: *@
<NaviusRating @bind-Value="_rating" Max="5" />

@* Or your own item children: *@
<NaviusRating @bind-Value="_rating">
    <NaviusRatingItem>@* star glyph *@</NaviusRatingItem>
</NaviusRating>

API Reference

Root

NaviusRating. Owns the value, the keyboard model and the hover preview. Renders a div with role=radiogroup. Value is two-way bindable.

Data attributes

Item

NaviusRatingItem. One star; its index is assigned by registration order. Renders a button with role=radio (plus two aria-hidden half-zones under AllowHalf).

Data attributes

Accessibility

Adheres to the radio group pattern with roving tabindex: only the checked star (or the first when unrated) is in the Tab order. The star holding a fractional value announces the real value (a 3.5 reads "3.5 stars"). The group is labelled "Rating" unless you supply an aria-label / aria-labelledby.

Keyboard interactions