A rating component for displaying and collecting star (or heart/dot) ratings. Supports fractional display, half- and full-step input, multiple symbols, read-only and disabled states, sizes, hover preview, keyboard control and an optional value label.
Show code Copy < nana-rating value = "3" ></ nana-rating >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/rating " ;
< nana-rating value = " 3 " ></ nana-rating >
Show code Copy < nana-rating size = "sm" value = "3" ></ nana-rating > < nana-rating size = "md" value = "3" ></ nana-rating > < nana-rating size = "lg" value = "3" ></ nana-rating >
precision="half" enables half-stars; show-value shows the number;
readonly / disabled make it non-interactive.
Show code Copy < nana-rating value = "3.5" precision = "half" show-value ></ nana-rating > < nana-rating value = "4.5" precision = "half" readonly show-value ></ nana-rating > < nana-rating value = "2" disabled ></ nana-rating > < nana-rating value = "6" max = "10" show-value ></ nana-rating >
The variant attribute sets the symbol — star (default), heart, or circle.
Show code Copy < nana-rating value = "3" variant = "star" ></ nana-rating > < nana-rating value = "3" variant = "heart" ></ nana-rating > < nana-rating value = "3" variant = "circle" ></ nana-rating >
Properties Property Attribute Type Default Description ariaLabelaria-labelstring | nullnullAccessible label clearable— booleanfalseClicking the current value resets it to zero disabled— booleanfalseDisable interaction and dim the control max— number5Number of symbols precision— RatingPrecision'full'Selection granularity readonly— booleanfalseDisplay only — no interaction showValueshow-valuebooleanfalseShow the numeric value beside the symbols size— Size'md'Component size value— number0Current rating value variant— RatingVariant'star'Symbol shape
Events Event Description nana-changeFired when the value is committed (`detail.value`) nana-inputFired while hovering over a new value (`detail.value`)
CSS parts Part Description ::part(base)The root container ::part(symbols)The symbol group ::part(symbol)A single rating symbol ::part(label)The value label
CSS custom properties Property Description --nana-rating-colorActive symbol colour --nana-rating-empty-colorEmpty symbol colour --nana-rating-sizeSymbol size (overrides `size`) --nana-rating-gapGap between symbols
Event Type Description nana-changeCustomEventFired when the value is committed (detail.value) nana-inputCustomEventFired while hovering over a new value (detail.value)
Variable Default Description --nana-rating-color— Active symbol colour --nana-rating-empty-color— Empty symbol colour --nana-rating-size— Symbol size (overrides size) --nana-rating-gap— Gap between symbols
Part Description baseThe root container symbolsThe symbol group symbolA single rating symbol labelThe value label
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Rating interactively Every state, prop, and edge case — with live controls — in Storybook.
