Rating

Basic

Value: 3

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

<template>
  <FuiRating v-model="value" />
  <div>Value: {{ value }}</div>
</template>

Max stars

Value: 4

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

<template>
  <FuiRating v-model="value" :max="5" />
</template>

Half step

Value: 3.5

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

<template>
  <FuiRating v-model="value" :max="5" step="half" />
</template>

Size

small: 2

medium: 2

large: 2

<script setup>
import { ref } from 'vue'
const small = ref(2)
const large = ref(2)
</script>

<template>
  <FuiRating v-model="small" :max="3" size="small" />
  <FuiRating v-model="large" :max="3" size="large" />
</template>

Props

Prop	Type	Default	Description
modelValue	number	0	Current rating
max	1 | 2 | 3 | 4 | 5	5	Number of stars
step	half | full	full	Step precision
size	small | medium | large	medium	Star size
disabled	boolean	false	Disabled state