Rate

Star rating: read-only display, interactive scoring, half stars, custom character and count.

Basic usage

Basic

<script setup>
import { ref } from 'vue'
const rate = ref(3)
</script>

<template>
  <LhRate v-model="rate" />
</template>

<script>
export default {
  data() {
    return { rate: 3 }
  },
}
</script>

<template>
  <LhRate v-model="rate" />
</template>

Half stars, readonly and score

allow-half enables half-star selection; readonly renders a display-only rating; show-score shows the numeric score.

Half / readonly / score

★★★★★4.5 stars

<script setup>
import { ref } from 'vue'
const rate2 = ref(3.5)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

<script>
export default {
  data() {
    return { rate2: 3.5 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

Custom count, disabled and character

max changes the number of stars, disabled blocks interaction, and character replaces the star with any symbol.

Custom

<script setup>
import { ref } from 'vue'
const rate3 = ref(8)
const rate4 = ref(3)
const rate5 = ref(4)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="A" />
  </div>
</template>

<script>
export default {
  data() {
    return { rate3: 8, rate4: 3, rate5: 4 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="A" />
  </div>
</template>

API

LhRate Props

Attribute	Description	Type	Default
modelValue	Current value (controlled v-model)	number	0
max	Max stars	number	5
allowHalf	Allow half stars	boolean	false
readonly	Read-only	boolean	false
disabled	Disabled	boolean	false
character	Custom character	string	—
showScore	Show score text	boolean	false
scoreTemplate	Score template ({n} placeholder)	string	—
sx	Quick layout props	LhSxProps	—

LhRate Events

Event	Description	Callback
update:modelValue	Emitted when the value changes (use with v-model)	(value: number) => void
change	Emitted when the value changes (by click or keyboard)	(value: number) => void

Accessibility

• Interactive mode is a role="radiogroup" of real focusable buttons (roving tabindex); arrows step (0.5 with half stars), Home/End to 0/max
• Read-only mode outputs role="img" + aria-label="n stars"

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/rate/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhRateProps

export interface LhRateProps {
  modelValue?: number
  max?: number
  allowHalf?: boolean
  readonly?: boolean
  disabled?: boolean
  character?: string
  showScore?: boolean
  scoreTemplate?: string
  sx?: LhSxProps
}

Constants

Public constants used by this component (linked from the Type / Default columns in the Props table above):

LH_RATE_MAX_DEFAULT _{(from @lh-ui/share/core/rate)}

export const LH_RATE_MAX_DEFAULT = 5