Rating

Rating component is a star based selection input.

Usage#

import { Rating } from 'primereact/rating';
<Rating>
    <Rating.Option value={1} />
</Rating>

Examples#

Basic#

Rating is used with the value property.

import { Rating } from 'primereact/rating';
 
function BasicDemo() {
    return (
        <div className="card flex justify-center">
            <Rating value={3.5}>
                <Rating.Option />
            </Rating>
        </div>
    );
}
 
export default BasicDemo;

Half Stars#

Use allowHalf property to allow half stars.

import { Rating } from 'primereact/rating';
 
function AllowHalfDemo() {
    return (
        <div className="card flex justify-center">
            <Rating value={3} allowHalf={false}>
                <Rating.Option />
            </Rating>
        </div>
    );
}
 
export default AllowHalfDemo;

Controlled#

Use onValueChange to listen to value changes.

import { useRatingChangeEvent } from '@primereact/types/shared/rating';
import { Button } from 'primereact/button';
import { Rating } from 'primereact/rating';
import React from 'react';
 
function ControlledDemo() {
    const [value, setValue] = React.useState<number | undefined>(4);
 
    return (
        <div className="card flex flex-col justify-center gap-4">
            <div className="flex items-center gap-2">
                <Button onClick={() => setValue(2.5)} severity="secondary" variant="outlined">
                    2.5 Star
                </Button>
                <Button onClick={() => setValue(3)} severity="secondary" variant="outlined">
                    3 Star
                </Button>
                <Button onClick={() => setValue(3.5)} severity="secondary" variant="outlined">
                    3.5 Star
                </Button>
            </div>
            <Rating value={value} onValueChange={(e: useRatingChangeEvent) => setValue(e.value)}>
                <Rating.Option />
            </Rating>
        </div>
    );
}
 
export default ControlledDemo;

Number of Stars#

Number of stars to display is defined with stars property.

import { Rating } from 'primereact/rating';
 
function StarsDemo() {
    return (
        <div className="card flex justify-center">
            <Rating stars={10}>
                <Rating.Option />
            </Rating>
        </div>
    );
}
 
export default StarsDemo;

Template#

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

A
A
A
A
A
A
A
A
A
A
import { Rating } from 'primereact/rating';
 
function TemplateDemo() {
    return (
        <div className="card flex flex-col gap-6 justify-center">
            <Rating value={3}>
                <Rating.Option onIcon={<span className="text-surface-950 dark:text-surface-0 text-2xl select-none">A</span>} offIcon={<span className="text-surface-300 dark:text-surface-700 text-2xl select-none">A</span>} />
            </Rating>
            <Rating 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>
        </div>
    );
}
 
export default TemplateDemo;

ReadOnly#

When readOnly is present, value cannot be edited.

import { Rating } from 'primereact/rating';
 
function ReadOnlyDemo() {
    return (
        <div className="card flex justify-center">
            <Rating value={3} readOnly>
                <Rating.Option />
            </Rating>
        </div>
    );
}
 
export default ReadOnlyDemo;

Disabled#

When disabled is present, value cannot be edited.

import { Rating } from 'primereact/rating';
 
function DisabledDemo() {
    return (
        <div className="card flex justify-center">
            <Rating value={3} disabled>
                <Rating.Option />
            </Rating>
        </div>
    );
}
 
export default DisabledDemo;

Accessibility#

Screen Reader#

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.

KeyFunction
tabMoves focus to the star representing the value, if there is none then first star receives the focus.
left arrow up arrowMoves focus to the previous star, if there is none then last radio button receives the focus.
right arrow down arrowMoves focus to the next star, if there is none then first star receives the focus.
spaceIf the focused star does not represent the value, changes the value to the star value.
PrimeReact 11.0.0-alpha.4 on React by PrimeTek