Rating

<script setup lang="ts">
import { RatingItem, RatingItemIndicator, RatingRoot } from 'akar';
import { ref } from 'vue';
import './styles.css';

const rating = ref(3);
</script>

<template>
  <div class="akar-demo akar-demo-Rating">
    <RatingRoot
      v-slot="{ items }"
      v-model="rating"
      class="RatingRoot"
    >
      <RatingItem
        v-for="item in items"
        :key="item"
        v-slot="{ steps }"
        :item="item"
        class="RatingItem"
      >
        <RatingItemIndicator
          v-for="step in steps"
          :key="step"
          :step="step"
          :aria-label="`Rate ${step}`"
          class="RatingItemIndicator"
        >
          <PIcon
            name="i-lucide-star"
            class="RatingStar"
          />
        </RatingItemIndicator>
      </RatingItem>
    </RatingRoot>
  </div>
</template>

@scope (.akar-demo-Rating) {
  .RatingRoot {
    display: flex;
    gap: 4px;
  }

  .RatingItem {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 150ms ease-out;
  }

  .RatingItem:hover {
    transform: scale(1.1);
  }

  .RatingItemIndicator {
    position: absolute;
    overflow: hidden;
    border-radius: 4px;
    color: #e7e5e4;
    transition: color 150ms;
    width: var(--akar-rating-item-step-width);
    opacity: var(--akar-rating-item-step-opacity);
    z-index: var(--akar-rating-item-step-z-index);
  }

  .RatingItemIndicator[data-state='active'] {
    color: hsl(142.1 70.6% 45.3%);
    filter: drop-shadow(0 1px 4px hsl(142.1 70.6% 45.3% / 0.5));
  }

  .RatingItemIndicator:focus-visible {
    outline: 2px solid hsl(142.1 70.6% 45.3%);
    outline-offset: 2px;
  }

  .RatingStar {
    width: 32px;
    height: 32px;
  }
}

Features

• Can be controlled or uncontrolled.
• Supports fractional ratings (half, quarter, etc.) via the step prop.
• Previews the value under the pointer on hover.
• Can be cleared by clicking the active value again.
• Built on top of Radio Group — full keyboard navigation and form support.
• Supports Right to Left direction.
• Exposes CSS variables for rendering partial steps.

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import all parts and piece them together. RatingRoot exposes the list of items, and each RatingItem exposes the steps it is made of, so you render an indicator per step.

<script setup>
import { RatingItem, RatingItemIndicator, RatingRoot } from 'akar';
</script>

<template>
  <RatingRoot v-slot="{ items }">
    <RatingItem
      v-for="item in items"
      :key="item"
      v-slot="{ steps }"
      :item="item"
    >
      <RatingItemIndicator
        v-for="step in steps"
        :key="step"
        :step="step"
      />
    </RatingItem>
  </RatingRoot>
</template>

API Reference

Root

Contains all the parts of a rating and provides the rating state. Renders a Radio Group under the hood, so it supports form submission and keyboard navigation.

Item

Wraps a single rating value (e.g. a single star). It computes the list of steps that compose this item based on the root's step prop, exposed via the default slot. Renders a label by default.

ItemIndicator

The interactive indicator rendered for each step of an item. It reflects whether the step is active based on the current (or hovered) value.

To render partial steps (for step values below 1), RatingItemIndicator exposes the following CSS variables:

A typical fractional indicator clips its width and stacks steps using these variables:

<RatingItemIndicator
  :step="step"
  class="absolute overflow-hidden w-[var(--akar-rating-item-step-width)] opacity-[var(--akar-rating-item-step-opacity)] z-[var(--akar-rating-item-step-z-index)]"
/>

Examples

Fractional rating

Use the step prop to allow values smaller than 1. Each RatingItem is then split into multiple steps, and each step renders its own indicator clipped with the exposed CSS variables.

<script setup>
import { RatingItem, RatingItemIndicator, RatingRoot } from 'akar'
import { ref } from 'vue'

const rating = ref(2.5)
</script>

<template>
  <RatingRoot
    v-slot="{ items }"
    v-model="rating"
    :step="0.5"
  >
    <RatingItem
      v-for="item in items"
      :key="item"
      v-slot="{ steps }"
      :item="item"
      class="relative"
    >
      <RatingItemIndicator
        v-for="step in steps"
        :key="step"
        :step="step"
        class="absolute overflow-hidden w-[var(--akar-rating-item-step-width)] opacity-[var(--akar-rating-item-step-opacity)] z-[var(--akar-rating-item-step-z-index)]"
      />
    </RatingItem>
  </RatingRoot>
</template>

Clearable

Use the clearable prop to let users reset the rating to 0 by clicking the currently selected value again.

<template>
  <RatingRoot
    v-model="rating"
    clearable
  >
    <!-- ... -->
  </RatingRoot>
</template>

Hover preview

Use the hoverable prop to preview the value under the pointer before committing to it. The RatingItemIndicator exposes data-state="active" for every step at or below the hovered value.

<template>
  <RatingRoot
    v-model="rating"
    hoverable
  >
    <!-- ... -->
  </RatingRoot>
</template>

Custom length

Use the length prop to change how many items are rendered. It defaults to 5.

<template>
  <RatingRoot
    v-model="rating"
    :length="10"
  >
    <!-- ... -->
  </RatingRoot>
</template>

Read-only / disabled

Use the disabled prop to prevent interaction, for example when displaying an average rating.

<template>
  <RatingRoot
    :default-value="4"
    disabled
  >
    <!-- ... -->
  </RatingRoot>
</template>

Accessibility

Built on top of the Radio Group primitive and adheres to the Radio Group WAI-ARIA design pattern. Provide an accessible label for each step via aria-label so screen reader users understand the value each indicator represents.

Keyboard Interactions