Flux

Rating ​

The rating 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: arrow keys adjust the value, number keys jump to a score, Home/End select the extremes, and Delete/Backspace clear it when clearable. The model value is a number, or null when no rating is set.

Required icons

star

Props

model-value?: number | null
The current rating, or null when no rating is set.

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

clearable?: boolean
Whether clicking the active value resets the rating to null. When enabled, pressing Delete or Backspace also clears the rating.

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

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

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>

Clearable

A clearable rating; keyboard users can press Delete or Backspace to reset it.

<template>
    <FluxFormField label="Rating">
        <FluxFormRating
            v-model="rating"
            :count="5"
            clearable/>
    </FluxFormField>
</template>

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

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

Custom count

A rating out of ten stars using count.

<template>
    <FluxFormRating
        v-model="rating"
        :count="10"/>
</template>

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

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

Custom icon

A rating using a different icon.

<template>
    <FluxFormRating
        v-model="rating"
        icon="heart"/>
</template>

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

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

Custom size

Larger stars using the size prop.

<template>
    <FluxFormRating
        v-model="rating"
        :size="36"/>
</template>

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

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

Disabled

A disabled rating showing a fixed value.

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

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

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

Used components ​