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

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

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

Implements the radio group WAI-ARIA APG 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. This behavior is covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions