1# Rating
2 
3Star rating input (v2.8.0)
4 
5**Parts:** `RatingRoot`, `RatingItem`, `RatingItemIndicator`
6 
7## RatingRoot
8 
9### Props
10 
11| Prop           | Type                         | Default        |
12| -------------- | ---------------------------- | -------------- |
13| `as`           | `AsTag \| Component`         | `"div"`        |
14| `asChild`      | `boolean`                    | -              |
15| `defaultValue` | `number`                     | -              |
16| `modelValue`   | `number`                     | -              |
17| `length`       | `number`                     | `5`            |
18| `step`         | `1 \| 0.5 \| 0.25 \| 0.1`    | `1`            |
19| `clearable`    | `boolean`                    | -              |
20| `hoverable`    | `boolean`                    | -              |
21| `disabled`     | `boolean`                    | `false`        |
22| `orientation`  | `"vertical" \| "horizontal"` | `"horizontal"` |
23 
24### Emits
25 
26| Event               | Payload             |
27| ------------------- | ------------------- |
28| `update:modelValue` | `[payload: number]` |
29 
30### Slots
31 
32| Slot         | Type                  |
33| ------------ | --------------------- |
34| `modelValue` | `number \| undefined` |
35| `items`      | `number[]`            |
36 
37## RatingItem
38 
39### Props
40 
41| Prop      | Type                 | Default   |
42| --------- | -------------------- | --------- |
43| `as`      | `AsTag \| Component` | `"label"` |
44| `asChild` | `boolean`            | -         |
45| `item`    | `number`             | required  |
46 
47### Slots
48 
49| Slot    | Type       |
50| ------- | ---------- |
51| `steps` | `number[]` |
52 
53## RatingItemIndicator
54 
55### Props
56 
57| Prop      | Type                 | Default  |
58| --------- | -------------------- | -------- |
59| `as`      | `AsTag \| Component` | -        |
60| `asChild` | `boolean`            | -        |
61| `step`    | `number`             | required |
62 
63### CSS Variables
64 
65| Variable                          | Description            |
66| --------------------------------- | ---------------------- |
67| `--reka-rating-item-step-width`   | Width based on step    |
68| `--reka-rating-item-step-opacity` | Visibility of step     |
69| `--reka-rating-item-step-z-index` | Z-index stacking order |
70 
71### Data Attributes
72 
73| Attribute      | Value                   |
74| -------------- | ----------------------- |
75| `[data-state]` | `"active" \| undefined` |
76 
77## Example
78 
79```vue
80<script setup>
81import { RatingRoot, RatingItem, RatingItemIndicator } from 'reka-ui'
82const rating = ref(3)
83</script>
84 
85<template>
86  <RatingRoot v-model="rating" :length="5">
87    <template #default="{ items }">
88      <RatingItem v-for="item in items" :key="item" :item="item">
89        <template #default="{ steps }">
90          <RatingItemIndicator v-for="step in steps" :key="step" :step="step">
91            ★
92          </RatingItemIndicator>
93        </template>
94      </RatingItem>
95    </template>
96  </RatingRoot>
97</template>
98```
99