FormRating

Stars the visitor can choose, with half steps and the keyboard (slider role).

import { FormRating } from '@zairakai/vue-components/Form'

Usage

<FormRating />

Example

★ ★ ★ ★ ★

Score: 3.5

<script setup>
  import { ref } from 'vue'

  const score = ref(3.5)
</script>

<template>
  <FormRating
    v-model="score"
    label="Your score"
    half
  />
  <p>Score: {{ score }}</p>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	number	undefined
max	number	5
half	boolean	false	Allow half stars.
label	string
name	string
form	string
readonly	boolean	false
disabled	boolean	false
valueText	string	'{value} out of {max}'	The text read for the score, with {value} and {max}.
clearable	boolean	true

Events

Name	Description
update:modelValue

Slots

Name	Description
default

See Theming for the class hooks and the data-* state of the components.