DOCS
v0.4

Components / Rating

Rating

Star rating input with keyboard navigation (arrow keys), half-star precision, hover preview, and clear-on-same-value.

formsv0.7.0

Playground

Examples

Basic
<cg-rating value="4"></cg-rating>
Half-star precision
<cg-rating value="3.5" precision="0.5"></cg-rating>
Large readonly
<cg-rating value="5" size="lg" readonly></cg-rating>

Import

import { CgRating } from '@cognivo/components';
// Or tree-shake: import '@cognivo/components/cg-rating';

Per-component imports ship only that component (~8 kB gzip).

API Reference

PropTypeDefaultDescription
valuenumber0Current rating
maxnumber5Maximum stars
precision0.5 | 11Step precision
size"sm" | "md" | "lg""md"Star size
readonlybooleanfalseRead-only mode
disabledbooleanfalseDisabled state

Events

EventDetailDescription
cg-rating-change{value: number}Rating changed