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

<template>
  <el-rate v-model="value" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref(0)
</script>

With Half Stars

<template>
  <el-rate v-model="value" allow-half />
</template>

With Text

<template>
  <el-rate
    v-model="value"
    show-text
    :texts="['Bad', 'Poor', 'Fair', 'Good', 'Excellent']"
  />
</template>

Clearable

<template>
  <el-rate v-model="value" clearable />
</template>

Custom Icons

<template>
  <el-rate
    v-model="value"
    :icons="[StarFilled, StarFilled, StarFilled]"
    :void-icon="Star"
  />
</template>

<script setup>
import { StarFilled, Star } from '@element-plus/icons-vue'
</script>

Read-only

<template>
  <el-rate
    v-model="value"
    disabled
    show-score
    score-template="{value} points"
  />
</template>

API Reference

Attributes

Events

Best Practices

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