Rating

Rating captures or displays a star score. When onChange is provided it is an interactive, keyboard-adjustable input (arrow keys step by precision); set readOnly to render it as a static score display. Use precision of 1 for whole stars or 0.5 for half steps, and size the stars with size ('sm' | 'md' | 'lg').

Example

Preview

import { Rating } from '@officina/ui';
import { useState } from 'react';

function ReviewStars() {
  const [value, setValue] = useState(3);
  return (
    <>
      <Rating value={value} onChange={setValue} precision={0.5} />
      <Rating value={4} readOnly size="sm" />
    </>
  );
}

API

Prop	Type	Default	Description
value*	number	—	Current rating value.
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
label	string	Rating	Accessible label for the rating group.
max	number	5	Number of stars. Defaults to 5.
onChange	(value: number) => void	—	Called with the chosen value; omit for a read-only display.
precision	enum	1	Selectable granularity: whole or half stars.
readOnly	boolean	—	Render as a non-interactive display.
size	enum	md	Star size.

Example

API

On this page