@kit-ng-ui/rate

Star rating component with ant-design feature parity. Half-step selection, custom character / icon, keyboard navigation, and ControlValueAccessor.

Install

pnpm add @kit-ng-ui/rate

@use '@kit-ng-ui/rate/styles';

Example

<kit-rate [(ngModel)]="score" />
<kit-rate [allowHalf]="true" [count]="10" />
<kit-rate character="A" [disabled]="true" [value]="4" />

API

| Input | Type | Default | Description | | ------------ | -------------------------------------- | ------------ | ------------------------------------ | | value | number | 0 | Current rating (or use forms). | | count | number | 5 | Number of stars. | | allowHalf | boolean | false | Allow half-star granularity. | | allowClear | boolean | true | Click again to clear. | | disabled | boolean | false | Read-only. | | character | string \| null | null | Render text instead of star icon. | | icon | string | 'star' | Icon name from the icon registry. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Star size. | | tooltips | readonly string[] \| null | null | One tooltip per star (uses title). |

| Output | Type | Description | | -------------- | -------- | ------------------------------------ | | valueChange | number | Emits on commit (click or keyboard). | | hoverChange | number | Emits as the pointer moves. |