Flux

Rating ​

The Rating component lets a user pick a score by selecting stars. It supports half-step selection, a read-only mode for displaying an existing rating, and full keyboard control. The model value is a number, or null when no rating is set.

Required icons

star

Props

allow-half?: boolean
Whether half-step ratings can be selected.

clearable?: boolean
Whether clicking the active value resets the rating to null.

count?: number
The number of stars.
Default: 5

disabled?: boolean
Whether the rating is disabled.

error?: string | null
An error message, putting the rating in an invalid state.

icon?: FluxIconName
The icon used for the stars.
Default: star

is-readonly?: boolean
Whether the rating is read-only.

name?: string
The name of the field, rendered as a hidden input for form submission.

size?: number
The size of the stars in pixels.

Emits

change: [number | null]
Triggered when the rating changes, with the new value (or null when cleared).

Examples ​

Basic

A basic rating.

<template>
    <FluxFormRating
        v-model="rating"
        clearable/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRating } from '@flux-ui/components';
    import { ref } from 'vue';

    const rating = ref<number | null>(null);
</script>

Half steps

A rating that allows half steps.

<template>
    <FluxFormRating
        v-model="rating"
        allow-half/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRating } from '@flux-ui/components';
    import { ref } from 'vue';

    const rating = ref<number | null>(3.5);
</script>

Read-only

A read-only rating for displaying a value.

<template>
    <FluxFormRating
        v-model="rating"
        allow-half
        is-readonly/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRating } from '@flux-ui/components';
    import { ref } from 'vue';

    const rating = ref<number | null>(4.5);
</script>

Used components ​