Rating
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.
Preview
Section titled “Preview”<nana-rating value="3"></nana-rating>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/rating";Basic usage
Section titled “Basic usage”<nana-rating value="3"></nana-rating><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 & states
Section titled “Precision & states”precision="half" enables half-stars; show-value shows the number;
readonly / disabled make it non-interactive.
<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>Icon variants
Section titled “Icon variants”The variant attribute sets the symbol — star (default), heart, or circle.
<nana-rating value="3" variant="star"></nana-rating>
<nana-rating value="3" variant="heart"></nana-rating>
<nana-rating value="3" variant="circle"></nana-rating>| Property | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating value |
max | number | 5 | Number of symbols |
variant | 'star' | 'heart' | 'circle' | 'star' | Symbol shape |
precision | 'full' | 'half' | 'full' | Selection granularity |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Component size |
readonly | boolean | false | Display only — no interaction |
disabled | boolean | false | Disable interaction and dim the control |
clearable | boolean | false | Clicking the current value resets it to zero |
showValue | boolean | false | Show the numeric value beside the symbols |
ariaLabel | string | null | null | Accessible label |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-change | CustomEvent | Fired when the value is committed (detail.value) |
nana-input | CustomEvent | Fired while hovering over a new value (detail.value) |
CSS Variables
Section titled “CSS Variables”| 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 |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
base | The root container |
symbols | The symbol group |
symbol | A single rating symbol |
label | The value label |
Accessibility
Section titled “Accessibility”- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Rating interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook