Rating

Rating is a controlled rating input. It renders a row of elements (stars by default) that the user clicks to set a value. It supports fractional values (e.g. 2.5 for a half-filled element), size and variant presets, and a display-only mode for showing averages.

When to use

• Capture a 1–5 (or custom range) score from the user.
• Display an average or fixed score read-only (readOnly), including half values.

Import

import { Rating } from '@spartanfx/react';

Basic usage

Rating is controlled: hold the value in state and update it from onChange. value and onChange are required.

function Example() {
  const [rating, setRating] = React.useState(3);
  return <Rating value={rating} onChange={setRating} />;
}

Read-only display

Set readOnly to show a score without hover or click handling — ideal for an average. Fractional values render as partially-filled elements.

<Rating value={4.5} onChange={() => {}} readOnly label="Average rating" />

Range, size, and variant

import { Rating, RatingSize, RatingVariant } from '@spartanfx/react';

<Rating
  value={value}
  onChange={setValue}
  max={10}
  size={RatingSize.Large}
  variant={RatingVariant.Circle}
  inlineLabel
  label="Satisfaction"
/>

Key props

Prop	Type	Default	Notes
value (required)	number	—	Current value; supports decimals like 2.5.
onChange (required)	(value) => void	—	Fires on selection; not called when readOnly.
max	number	5	Number of elements.
min	number	1	Minimum selectable value.
readOnly	boolean	false	Display-only (no hover/click).
size	RatingSize	Medium	Element size preset.
variant	RatingVariant	Star	Visual variant.
label / inlineLabel	string / boolean	— / false	Optional label, shown above or inline.
onRenderElement	(props) => ReactElement	—	Custom element renderer.

See the full generated reference: Rating API ↗.

See also

• Components overview