Preview Updated 2026-05-10

Rating

Star rating control — integer or half-star precision, read-only and disabled states, optional value display.

Basic usage

The simplest form — 5 integer stars with hover preview and click to commit.

已选：3 / 5

<CfRating v-model="value" />

<CfRating value={value} onChange={setValue} />

Half-star precision

allowHalf enables half-star steps — hovering on the left half of star i returns i + 0.5, the right half returns i + 1. Useful for 0.5-grain rating scenarios.

3.5 / 5

<CfRating v-model="value" allow-half show-value />

<CfRating value={value} onChange={setValue} allowHalf showValue />

Read-only / disabled

readonly locks the value while preserving the visuals (for displaying existing ratings); disabled greys out and blocks all interaction.

readonly · 显示评分但不可改

4 / 5

disabled · 灰显且不响应

<CfRating :model-value="4" readonly show-value />
<CfRating :model-value="2" disabled />

<CfRating value={4} readonly showValue />
<CfRating value={2} disabled />

Three sizes

size controls the diameter of each star — sm / md (default) / lg. showValue appends value / count at the end.

3 / 5

<CfRating v-model="a" size="sm" show-value />
<CfRating v-model="b" size="md" show-value />
<CfRating v-model="c" size="lg" show-value />

<CfRating value={a} onChange={setA} size="sm" showValue />
<CfRating value={b} onChange={setB} size="md" showValue />
<CfRating value={c} onChange={setC} size="lg" showValue />

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`number`	`0`	Current rating
`count`	`number`	`5`	Total number of stars
`allowHalf`	`boolean`	`false`	Enable half-star precision
`readonly`	`boolean`	`false`	Read-only
`disabled`	`boolean`	`false`	Disabled
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`showValue`	`boolean`	`false`	Display `value / count` at the end