Input Rating

A component to display and collect ratings from users.

Usage

Use the v-model directive to control the rating value of the InputRating component.

modelValue

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

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

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <UInputRating :default-value="3" />
</template>

Half Stars

Use the allow-half prop to enable half-star ratings. When enabled, clicking on the left half of a star will set a half-star value.

allowHalf

modelValue

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

<template>
  <UInputRating allow-half v-model="value" />
</template>

Use the icon prop to customize the icon used for stars. Defaults to i-lucide-star. Use the empty-icon prop to customize the icon used for empty stars. If not provided, uses the same icon as icon.

icon

modelValue

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

<template>
  <UInputRating icon="i-lucide-heart" v-model="value" />
</template>

icon

emptyIcon

modelValue

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

<template>
  <UInputRating icon="i-lucide-star" empty-icon="i-lucide-star-off" v-model="value" />
</template>

You can customize the default star icon globally in your app.config.ts under ui.icons.star key.

You can customize the default star icon globally in your vite.config.ts under ui.icons.star key.

Max Value

Use the max prop to set the maximum number of stars. Defaults to 5.

max

modelValue

allowHalf

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

<template>
  <UInputRating :max="10" v-model="value" allow-half />
</template>

Color

Use the color prop to change the color of the filled stars.

color

modelValue

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

<template>
  <UInputRating color="primary" v-model="value" />
</template>

Size

Use the size prop to change the size of the stars.

size

modelValue

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

<template>
  <UInputRating size="md" v-model="value" />
</template>

Orientation

Use the orientation prop to change the orientation of the rating. Defaults to horizontal.

orientation

modelValue

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

<template>
  <UInputRating orientation="horizontal" v-model="value" />
</template>

Disabled

Use the disabled prop to disable the InputRating component. When disabled, the component has reduced opacity (75%) and shows a not-allowed cursor to indicate it's not interactive.

disabled

modelValue

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

<template>
  <UInputRating disabled v-model="value" />
</template>

Readonly

Use the readonly prop to display a rating without allowing user interaction. Unlike disabled, it maintains normal appearance (full opacity, default cursor). Use when you want to display a rating that cannot be changed but should look normal.

readonly

modelValue

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

<template>
  <UInputRating readonly v-model="value" />
</template>

disabled

modelValue

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

<template>
  <UInputRating disabled v-model="value" />
</template>

Focus Ring

The InputRating component displays a focus ring by default for accessibility purposes, helping keyboard users identify the focused element. If you need to remove the focus ring for design reasons, you can override it using the ui prop:

modelValue

ui.star

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

<template>
  <UInputRating v-model="value" :ui="{
  star: 'focus-within:ring-0 focus-within:ring-offset-0'
}" />
</template>

Removing the focus ring may impact accessibility for keyboard users. Consider providing alternative visual indicators when removing the default focus ring.

Examples

With Form Integration

The InputRating component integrates seamlessly with forms and supports form validation.

name

required

modelValue

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

<template>
  <UInputRating name="rating" required v-model="value" />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`modelValue`	`0`	`number` The rating value (0 to max).
`defaultValue`	`0`	`number` The default rating value.
`max`	`5`	`number` Maximum rating value.
`allowHalf`	`false`	`boolean` Allow half star ratings.
`readonly`	`false`	`boolean` Make the rating readonly (non-interactive).
`disabled`	`false`	`boolean` Disable the rating.
`icon`	`appConfig.ui.icons.star`	`any` The icon to use for stars.
`emptyIcon`		`any` The icon to use for empty stars (outline version). If not provided, uses the same icon as `icon` but with outline style.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`name`		`string` Form field name.
`id`		`string` Form field id.
`required`		`boolean` Form field required.
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation of the rating.
`ui`		`{ root?: ClassNameValue; star?: ClassNameValue; starFilled?: ClassNameValue; starHalf?: ClassNameValue; icon?: ClassNameValue; }`

Slots

Slot	Type
`star`	`{ index: number; value: number; filled: boolean; half: boolean; }`

Emits

Event	Type
`update:modelValue`	`[value: number]`
`change`	`[event: Event]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    inputRating: {
      slots: {
        root: '',
        star: 'relative inline-block cursor-pointer transition-colors select-none focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900 rounded-sm',
        starFilled: 'absolute inset-0 pointer-events-none',
        starHalf: 'absolute inset-0 pointer-events-none overflow-hidden [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)] [-webkit-clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]',
        icon: 'w-full h-full'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'inline-flex items-center gap-0.5'
          },
          vertical: {
            root: 'inline-flex flex-col items-center gap-0.5'
          }
        },
        size: {
          xs: {
            star: 'size-3'
          },
          sm: {
            star: 'size-4'
          },
          md: {
            star: 'size-5'
          },
          lg: {
            star: 'size-6'
          },
          xl: {
            star: 'size-7'
          }
        },
        color: {
          primary: {
            starFilled: 'text-primary-500 dark:text-primary-400',
            starHalf: 'text-primary-500 dark:text-primary-400',
            star: 'focus-within:ring-primary-500 dark:focus-within:ring-primary-400'
          },
          secondary: {
            starFilled: 'text-secondary-500 dark:text-secondary-400',
            starHalf: 'text-secondary-500 dark:text-secondary-400',
            star: 'focus-within:ring-secondary-500 dark:focus-within:ring-secondary-400'
          },
          success: {
            starFilled: 'text-success-500 dark:text-success-400',
            starHalf: 'text-success-500 dark:text-success-400',
            star: 'focus-within:ring-success-500 dark:focus-within:ring-success-400'
          },
          info: {
            starFilled: 'text-info-500 dark:text-info-400',
            starHalf: 'text-info-500 dark:text-info-400',
            star: 'focus-within:ring-info-500 dark:focus-within:ring-info-400'
          },
          warning: {
            starFilled: 'text-warning-500 dark:text-warning-400',
            starHalf: 'text-warning-500 dark:text-warning-400',
            star: 'focus-within:ring-warning-500 dark:focus-within:ring-warning-400'
          },
          error: {
            starFilled: 'text-error-500 dark:text-error-400',
            starHalf: 'text-error-500 dark:text-error-400',
            star: 'focus-within:ring-error-500 dark:focus-within:ring-error-400'
          },
          neutral: {
            starFilled: 'text-gray-500 dark:text-gray-400',
            starHalf: 'text-gray-500 dark:text-gray-400',
            star: 'focus-within:ring-gray-500 dark:focus-within:ring-gray-400'
          }
        },
        readonly: {
          true: {
            root: 'cursor-default',
            star: 'cursor-default'
          },
          false: {}
        },
        disabled: {
          true: {
            root: 'opacity-75 cursor-not-allowed',
            star: 'cursor-not-allowed pointer-events-none'
          },
          false: {
            star: 'hover:scale-110'
          }
        }
      },
      defaultVariants: {
        size: 'md',
        color: 'primary',
        orientation: 'horizontal'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        inputRating: {
          slots: {
            root: '',
            star: 'relative inline-block cursor-pointer transition-colors select-none focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900 rounded-sm',
            starFilled: 'absolute inset-0 pointer-events-none',
            starHalf: 'absolute inset-0 pointer-events-none overflow-hidden [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)] [-webkit-clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]',
            icon: 'w-full h-full'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'inline-flex items-center gap-0.5'
              },
              vertical: {
                root: 'inline-flex flex-col items-center gap-0.5'
              }
            },
            size: {
              xs: {
                star: 'size-3'
              },
              sm: {
                star: 'size-4'
              },
              md: {
                star: 'size-5'
              },
              lg: {
                star: 'size-6'
              },
              xl: {
                star: 'size-7'
              }
            },
            color: {
              primary: {
                starFilled: 'text-primary-500 dark:text-primary-400',
                starHalf: 'text-primary-500 dark:text-primary-400',
                star: 'focus-within:ring-primary-500 dark:focus-within:ring-primary-400'
              },
              secondary: {
                starFilled: 'text-secondary-500 dark:text-secondary-400',
                starHalf: 'text-secondary-500 dark:text-secondary-400',
                star: 'focus-within:ring-secondary-500 dark:focus-within:ring-secondary-400'
              },
              success: {
                starFilled: 'text-success-500 dark:text-success-400',
                starHalf: 'text-success-500 dark:text-success-400',
                star: 'focus-within:ring-success-500 dark:focus-within:ring-success-400'
              },
              info: {
                starFilled: 'text-info-500 dark:text-info-400',
                starHalf: 'text-info-500 dark:text-info-400',
                star: 'focus-within:ring-info-500 dark:focus-within:ring-info-400'
              },
              warning: {
                starFilled: 'text-warning-500 dark:text-warning-400',
                starHalf: 'text-warning-500 dark:text-warning-400',
                star: 'focus-within:ring-warning-500 dark:focus-within:ring-warning-400'
              },
              error: {
                starFilled: 'text-error-500 dark:text-error-400',
                starHalf: 'text-error-500 dark:text-error-400',
                star: 'focus-within:ring-error-500 dark:focus-within:ring-error-400'
              },
              neutral: {
                starFilled: 'text-gray-500 dark:text-gray-400',
                starHalf: 'text-gray-500 dark:text-gray-400',
                star: 'focus-within:ring-gray-500 dark:focus-within:ring-gray-400'
              }
            },
            readonly: {
              true: {
                root: 'cursor-default',
                star: 'cursor-default'
              },
              false: {}
            },
            disabled: {
              true: {
                root: 'opacity-75 cursor-not-allowed',
                star: 'cursor-not-allowed pointer-events-none'
              },
              false: {
                star: 'hover:scale-110'
              }
            }
          },
          defaultVariants: {
            size: 'md',
            color: 'primary',
            orientation: 'horizontal'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.