Preview

Installation

npx sigma-ui@latest add rating

Usage

<script setup lang="ts">
import { StarIcon } from '@lucide/vue';
import { Rating, RatingItem, RatingItemIndicator } from '@/components/ui/rating';
</script>

<template>
  <Rating v-model="value">
    <template #default="{ items }">
      <RatingItem
        v-for="item in items"
        :key="item"
        v-slot="{ steps }"
        :item="item"
      >
        <RatingItemIndicator
          v-for="step in steps"
          :key="step"
          :step="step"
        >
          <StarIcon />
        </RatingItemIndicator>
      </RatingItem>
    </template>
  </Rating>
</template>

v-model is the selected value. length is the number of items, and step can be 1, 0.5, 0.25, or 0.1. Set clearable so choosing the current value resets it to 0.

Examples

Stars

API Reference

Rating

Props

Prop	Type	Default
defaultValue The rating value when initially rendered. Use when you do not need to control the state of the rating.	number	-
modelValue The controlled rating value. Can be bound with v-model.	number	-
length The number of rating items to render.	number	-
clearable When true, clicking the currently selected rating resets the value to 0.	boolean	-
hoverable When true, the rating previews the value under the pointer on hover.	boolean	-
step The granularity each rating item is divided into.	1 | 0.5 | 0.25 | 0.1	-
disabled When true, prevents the user from interacting with radio items.	boolean	-
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
orientation The orientation of the component.	DataOrientation	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-
loop When true, keyboard navigation will loop from last item to first, and vice versa.	boolean	-

Events

Event	Payload
update:modelValue Event handler called when the value changes	[payload: number]

Slots

Slot	Scope
default Rating items. Receives the current value and the item indexes.	{ modelValue: number; items: number[]; }

RatingItem

Props

Prop	Type	Default
itemrequired The 1-based index of this item within the rating (e.g. the 3rd star).	number	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Indicators for this item. Receives the step values that make up the item.	{ steps: number[]; }

RatingItemIndicator

Props

Prop	Type	Default
steprequired The step value this indicator represents.	number	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

The rating is a radio group. Each value is a radio button, and arrow keys move between values.

Key	Description
Tab	Moves focus into the rating.
ArrowRight or ArrowDown	Selects the next value.
ArrowLeft or ArrowUp	Selects the previous value.
Space	Selects the focused value.