Rating

Rating allows the user to rate content in whole or half stars. Many other shapes are available!

Code Example

<script setup lang="ts">
const value = ref(0)
</script>

<template>
  <Rating v-model="value" />
</template>

Components

Rating is a standalone component.

Rating

Rating can be customized with the following props:

Prop	Type	Description
`model-value`	string	Controls the selected state. Use with `v-model`
`count`	number	Sets the number of stars.
`half`	number	Allows specifying half stars.
`disabled`	boolean	disables the component
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`shape`	string	sets the shape of the internal Mask to any of the below prop names
`squircle`	boolean	sets the shape to `squircle`.
`heart`	boolean	sets the shape to `heart`.
`hexagon`	boolean	sets the shape to `hexagon`.
`hexagon2`	boolean	sets the shape to `hexagon2`.
`decagon`	boolean	sets the shape to `decagon`.
`pentagon`	boolean	sets the shape to `pentagon`.
`diamond`	boolean	sets the shape to `diamond`.
`square`	boolean	sets the shape to `square`.
`circle`	boolean	sets the shape to `circle`.
`parallelogram`	boolean	sets the shape to `parallelogram`.
`parallelogram2`	boolean	sets the shape to `parallelogram2`.
`parallelogram3`	boolean	sets the shape to `parallelogram3`.
`parallelogram4`	boolean	sets the shape to `parallelogram4`.
`star`	boolean	sets the shape to `star`.
`star2`	boolean	sets the shape to `star2`.
`triangle`	boolean	sets the shape to `triangle`.
`triangle2`	boolean	sets the shape to `triangle2`.
`triangle3`	boolean	sets the shape to `triangle3`.
`triangle4`	boolean	sets the shape to `triangle4`.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Count

Pass any integer to the count prop to allow ratings up to that number.

Code Example

<script setup lang="ts">
const value = ref(0)
</script>

<template>
  <Rating v-model="value" count="9" />
</template>

Half

Use the half prop to allow half stars.

Code Example

<script setup lang="ts">
const value = ref(0)
</script>

<template>
  <Rating v-model="value" half />
</template>

Disabled

The disabled prop prevents changes by the user.

Color

The color props allow use of any DaisyUI color.

Code Example

<script setup lang="ts">
const value = ref(0)
</script>

<template>
  <Rating v-model="value" primary />
</template>

Shape

The shape props allow changing from a star to one of the supported shapes. Shapes also work with the half prop.

Code Example

<script setup lang="ts">
const value = ref(0)
</script>

<template>
  <Rating v-model="value" heart />
</template>

Size

The size props allow altering the size of the rating.

Code Example

<script setup lang="ts">
const value = ref(0)
</script>

<template>
  <Rating v-model="value" xs />
</template>

Prev RangeMeasure

Next Select