/reka-ui

Rating

Star rating input (v2.8.0)

Parts: RatingRoot, RatingItem, RatingItemIndicator

RatingRoot

Props

Emits

Slots

RatingItem

Props

Slots

RatingItemIndicator

Props

CSS Variables

Data Attributes

Example

<script setup>
import { RatingRoot, RatingItem, RatingItemIndicator } from 'reka-ui'
const rating = ref(3)
</script>

<template>
  <RatingRoot v-model="rating" :length="5">
    <template #default="{ items }">
      <RatingItem v-for="item in items" :key="item" :item="item">
        <template #default="{ steps }">
          <RatingItemIndicator v-for="step in steps" :key="step" :step="step">
            ★
          </RatingItemIndicator>
        </template>
      </RatingItem>
    </template>
  </RatingRoot>
</template>