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

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfRating v-model="value" />
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ value }}</code> / 5</span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3);
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfRating v-model="value" />
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ value }}</code> / 5</span>
  </div>
</template>

import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(3);
  return (
    <>
      <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

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3.5);
</script>
<template>
  <CfRating v-model="value" allow-half show-value />
</template>

<script setup>
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3.5);
</script>
<template>
  <CfRating v-model="value" allow-half show-value />
</template>

import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(3.5);
  return (
    <>
      <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 · 灰显且不响应

src/App.vue

<script setup lang="ts">
import { CfRating } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly · 显示评分但不可改</div>
      <CfRating :model-value="4" readonly show-value />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled · 灰显且不响应</div>
      <CfRating :model-value="2" disabled />
    </div>
  </div>
</template>

<script setup>
import { CfRating } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly · 显示评分但不可改</div>
      <CfRating :model-value="4" readonly show-value />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled · 灰显且不响应</div>
      <CfRating :model-value="2" disabled />
    </div>
  </div>
</template>

import { CfRating } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const a = ref(3);
const b = ref(3);
const c = ref(3);
</script>
<template>
  <div class="demo-stack">
    <CfRating v-model="a" size="sm" show-value />
    <CfRating v-model="b" size="md" show-value />
    <CfRating v-model="c" size="lg" show-value />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const a = ref(3);
const b = ref(3);
const c = ref(3);
</script>
<template>
  <div class="demo-stack">
    <CfRating v-model="a" size="sm" show-value />
    <CfRating v-model="b" size="md" show-value />
    <CfRating v-model="c" size="lg" show-value />
  </div>
</template>

import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(3);
  const [b, setB] = useState(3);
  const [c, setC] = useState(3);
  return (
    <>
      <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