Rating

Rating component is a star based selection input.

Usage#

import { Rating } from '@primereact/ui/rating';

<Rating>
    <Rating.Option value={1} />
</Rating>

Examples#

Half Stars#

Use allowHalf property to allow half stars.

import { Rating } from '@primereact/ui/rating';

function AllowHalfDemo() {
    return (
        <div className="flex justify-center">
            <Rating.Root value={3} allowHalf={false}>
                <Rating.Option className="[&_svg]:size-5!" />
            </Rating.Root>
        </div>
    );
}

export default AllowHalfDemo;

Controlled#

Use onValueChange to listen to value changes.

'use client';
import { useRatingChangeEvent } from '@primereact/types/shared/rating';
import { Button } from '@primereact/ui/button';
import { Rating } from '@primereact/ui/rating';
import React from 'react';

function ControlledDemo() {
    const [value, setValue] = React.useState<number | undefined>(4);

    return (
        <div className="flex flex-col items-center justify-center gap-6">
            <Rating.Root value={value} onValueChange={(e: useRatingChangeEvent) => setValue(e.value)}>
                <Rating.Option className="[&_svg]:size-5!" />
            </Rating.Root>
            <div className="flex items-center gap-2">
                <Button onClick={() => setValue(2.5)} severity="secondary" variant="outlined" size="small">
                    2.5 Star
                </Button>
                <Button onClick={() => setValue(3)} severity="secondary" variant="outlined" size="small">
                    3 Star
                </Button>
                <Button onClick={() => setValue(3.5)} severity="secondary" variant="outlined" size="small">
                    3.5 Star
                </Button>
            </div>
        </div>
    );
}

export default ControlledDemo;

Number of Stars#

Number of stars to display is defined with stars property.

import { Rating } from '@primereact/ui/rating';

function StarsDemo() {
    return (
        <div className="flex justify-center">
            <Rating.Root stars={10}>
                <Rating.Option className="[&_svg]:size-5!" />
            </Rating.Root>
        </div>
    );
}

export default StarsDemo;

Template#

Custom icons are used to override the default icons with onIcon and offIcon properties.

import { Rating } from '@primereact/ui/rating';

function TemplateDemo() {
    return (
        <div className="flex flex-col items-center justify-center gap-6">
            <Rating.Root value={3}>
                <Rating.Option
                    onIcon={<span className="text-surface-950 dark:text-surface-0 font-medium text-2xl select-none">A</span>}
                    offIcon={<span className="text-surface-300 dark:text-surface-700 font-medium text-2xl select-none">A</span>}
                />
            </Rating.Root>
            <Rating.Root value={3} allowHalf={false}>
                <Rating.Option
                    onIcon={
                        <span className="w-6 h-6">
                            <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" className="w-6 h-6" />
                        </span>
                    }
                    offIcon={
                        <span className="w-6 h-6">
                            <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" />
                        </span>
                    }
                />
            </Rating.Root>
        </div>
    );
}

export default TemplateDemo;

ReadOnly#

When readOnly is present, value cannot be edited.

import { Rating } from '@primereact/ui/rating';

function ReadOnlyDemo() {
    return (
        <div className="flex justify-center">
            <Rating.Root value={3} readOnly>
                <Rating.Option className="[&_svg]:size-5!" />
            </Rating.Root>
        </div>
    );
}

export default ReadOnlyDemo;

Disabled#

When disabled is present, value cannot be edited.

import { Rating } from '@primereact/ui/rating';

function DisabledDemo() {
    return (
        <div className="flex justify-center">
            <Rating.Root value={3} disabled>
                <Rating.Option className="[&_svg]:size-5!" />
            </Rating.Root>
        </div>
    );
}

export default DisabledDemo;

Accessibility#

Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria property.

Keyboard Support#

Keyboard interaction is derived from the native browser handling of radio buttons in a group.

Key	Function
`tab`	Moves focus to the star representing the value, if there is none then first star receives the focus.
`left arrow` `up arrow`	Moves focus to the previous star, if there is none then last radio button receives the focus.
`right arrow` `down arrow`	Moves focus to the next star, if there is none then first star receives the focus.
`space`	If the focused star does not represent the value, changes the value to the star value.