El Rate

Rate Component

Rate component is used for rating with customizable icons and levels.

When to Use

• User ratings
• Product reviews
• Feedback scoring
• Star ratings

Basic Usage

  

import { ref } from 'vue'

const value = ref(0)

With Half Stars

With Text

Clearable

Custom Icons

  

import { StarFilled, Star } from '@element-plus/icons-vue'

Read-only

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | model-value / v-model | Binding value | number | 0 | | max | Max rating score | number | 5 | | size | Size | 'large' \| 'default' \| 'small' | — | | disabled | Read-only | boolean | false | | allow-half | Allow half stars | boolean | false | | low-threshold | Low/medium threshold | number | 2 | | high-threshold | Medium/high threshold | number | 4 | | colors | Colors for levels | string[] \| Record | — | | void-color | Color of unselected | string | '#c6d1de' | | icons | Icon components | string[] \| Component[] | — | | void-icon | Unselected icon | string \| Component | — | | show-text | Display texts | boolean | false | | show-score | Display score | boolean | false | | text-color | Text color | string | '' | | texts | Text array | string[] | — | | score-template | Score template | string | '{value}' | | clearable | Can reset to 0 | boolean | false |

Events

| Name | Description | Type | |------|-------------|------| | change | Triggers when value changes | (value: number) => void |

Best Practices

1. Use allow-half for precise ratings
2. Use show-score for read-only displays
3. Use clearable to allow resetting

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.