Rate

Used for rating things.

Basic Usage

The component uses a five-point rating scale by default, and colors can be used to customize the active icon color.

Basic Usage

Different Sizes

Use the size prop to switch between large, default, and small.

Different Sizes

Allow Half Selection

Set allow-half to enable half-step ratings.

Allow Half Selection

Auxiliary Text

Use show-text to display helper text or show-score to render the numeric value.

Auxiliary Text

Clearable

Use clearable to reset the value to 0 when clicking the current score again.

Clearable

Read-only

Set disabled to enable read-only display mode.

Read-only

Custom Icon

Use the icon slot to replace the built-in rating icon.

Custom Icon

Use in Nuxt

YhRate works in Nuxt 3/4 after registering @yh-ui/nuxt.

Use in Nuxt

API

Props

Prop	Description	Type	Default
model-value / v-model	Binding value	number	0
max	Maximum value	number	5
disabled	Whether it is read-only	boolean	false
allow-half	Whether half-selection is allowed	boolean	false
icon	Custom selected icon	string | Component	''
void-icon	Custom unselected icon	string | Component	''
disabled-void-icon	Custom unselected icon when disabled	string | Component	''
colors	Active rating colors	string | string[] | Record<number, string>	'#F7BA2A'
void-color	Color for unselected status	string	'#C6D1DE'
disabled-void-color	Unselected color when disabled	string	'#EFF2F7'
show-score	Whether to display the current score	boolean	false
show-text	Whether to display auxiliary text	boolean	false
text-color	Auxiliary text color	string	'#1f2d3d'
texts	Array of auxiliary texts	string[]	[]
score-template	Display template for scores	string	'{value}'
size	Size of rating icons	'large' | 'default' | 'small'	'default'
clearable	Whether clicking the current value resets the rating	boolean	false
theme-overrides	Component-level theme variable overrides	ComponentThemeVars	undefined

Events

Event Name	Description	Callback Parameters
update:modelValue	Triggered when the bound value changes	(value: number) => void
change	Triggered when the value changes	(value: number) => void

Slots

Slot Name	Description	Parameters
icon	Custom icon	{ index: number, width: string, activeColor: string, voidColor: string }

Expose

This component does not expose public instance methods or properties.

Theme Variables

Variable	Description	Default
--yh-rate-void-color	Unselected color	#c6d1de
--yh-rate-fill-color	Selected color	#f7ba2a
--yh-rate-disabled-void-color	Unselected color when disabled	#eff2f7
--yh-rate-text-color	Auxiliary text color	#1f2d3d
--yh-rate-font-size	Auxiliary text size	14px
--yh-rate-icon-margin	Icon spacing	6px

Type Exports

Name	Description
YhRateProps	Component props type
YhRateEmits	Component emits type
YhRateSlots	Component slots type
YhRateSize	Size union type
YhRateInstance	Component instance type