An accessible rating for Vue 3.

Fomantic-UI markup, no jQuery. Click, hover or use the arrow keys — v-model keeps the number in sync.

Pick a value to see the @rate event.

type
max: 5
clearable
disabled

Install

The component renders Fomantic-UI markup. Bring the icon and rating stylesheets from fomantic-ui-css; no jQuery, no Fomantic JavaScript.

pnpm add v-rating fomantic-ui-css

<script setup lang="ts">
  import { ref } from 'vue';
  import { VRating } from 'v-rating';
  import 'fomantic-ui-css/components/icon.min.css';
  import 'fomantic-ui-css/components/rating.min.css';

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

<template>
  <VRating v-model="rating" type="heart" :max="5" class="huge" />
</template>

Props

Emits update:modelValue and rate. Arrow keys, Home and End move the value; Enter and Space select.

prop	type	default	what it does
v-model	number	0	The rating. 0 means no rating.
type	'star' \| 'heart'	'star'	Icon set Fomantic-UI styles.
max	number	5	How many icons to render.
clearable	boolean	true	Clicking the current value resets to 0.
disabled	boolean	false	Read-only, out of the tab order.
label	string	'Rating'	Accessible name of the radio group.