Rating ​

Lets users rate items using stars in a simple, interactive way. Provides immediate visual feedback and supports partial or full selections.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Rating } from 'frappe-ui'

const value = ref(0)
</script>

<template>
  <Rating v-model="value" label="Rate this article" />
</template>

Sizes ​

Max stars ​

max controls the number of stars rendered. Defaults to 5.

Labeling ​

How would you rate the experience?

States ​

Deprecated rating_from prop ​

The rating_from prop is kept for backwards compatibility and fires a dev-mode [frappe-ui] Rating.rating_from is deprecated. Use max instead. warning. Use max instead.

API Reference ​

Show types
typescript
import type { InputSize } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

export interface RatingProps extends InputLabelingProps {
  /** The current rating value (controlled). */
  modelValue?: number

  /** Number of stars to render. Defaults to 5. */
  max?: number

  /**
   * Number of stars to render.
   * @deprecated Use `max` instead.
   */
  rating_from?: number

  /** If true, disables interaction and makes the rating read-only. */
  readonly?: boolean

  /** Size of the rating component. */
  size?: InputSize
}

export interface RatingEmits {
  /** Fired when the rating value changes. */
  'update:modelValue': [value: number]
}
Prop Default Type
modelValue
0
number

The current rating value (controlled).

max
—
number

Number of stars to render. Defaults to 5.

rating_from
—

Deprecated — Use `max` instead.

readonly
false
boolean

If true, disables interaction and makes the rating read-only.

size
"md"
InputSize

Size of the rating component.

label
—
string

Label rendered above (or beside, for binary controls) the input.

description
—
string

Helper text rendered below the input. Hidden when `error` is set.

error
—
string | FrappeUIError

Error message rendered below the input. When set, the control receives `aria-invalid="true"` and `data-state="invalid"`. May be either a string or an `Error` object whose `messages?: string[]` is rendered as stacked lines (with `Error.message` as the fallback).

required
—
boolean

Marks the field as required. Renders an asterisk next to the label and forwards `required` / `aria-required` to the underlying control.

id
—
string

HTML id of the underlying control. Auto-generated via `useId()` if omitted.

Slot Payload
label
{ required: boolean; }

Overrides the rendered label content. Receives `{ required }`.

description
—

Overrides the rendered description content.

Event Payload
update:modelValue
[value: number]

Fired when the model value changes.

ProgressSelect