IRatingProps

@spartanfx/react v1.0.5

---

@spartanfx/react / IRatingProps

Interface: IRatingProps

Props for the Rating component.

Example

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

// Read-only display (e.g., showing average rating)
<Rating value={3.5} onChange={() => {}} readOnly />

// With custom colors and label
<Rating
  value={rating}
  onChange={setRating}
  fillColor="#FF6B6B"
  label="Rate this product"
/>

// Circle variant with large size
<Rating
  value={rating}
  onChange={setRating}
  variant={RatingVariant.Circle}
  size={RatingSize.Large}
/>

Properties

Property	Type	Description
appearanceMode?	AppearanceMode	Appearance mode: light or dark Default AppearanceMode.light
ariaLabel?	string	Custom aria-label for the rating container. If not provided, a default label will be generated based on the current value.
className?	string	Additional CSS class name for the root element
classNames?	IRatingClassNames	Class name overrides for component elements
fillColor?	string	Override the default fill color for active/filled elements
inlineLabel?	boolean	When true, displays label and rating inline (horizontal). When false, displays label above rating (vertical). Default false
label?	string	Optional label text displayed with the rating
max?	number	Maximum rating value (number of rating elements) Default 5
min?	number	Minimum rating value (inclusive) Default 1
noBorder?	boolean	When true, removes the border and shadow from the container Default false
onChange	(value) => void	Callback fired when the user selects a rating value. This is a controlled component - update the value prop in this callback. Not called when readOnly is true. Example const [rating, setRating] = React.useState(3); <Rating value={rating} onChange={setRating} />
onRenderElement?	(props) => ReactElement	Custom render function for rating elements. When provided, overrides the default icon rendering.
outlineColor?	string	Override the default outline color for empty elements
readOnly?	boolean	When true, the rating is display-only (no hover effects or click handling). Useful for showing average ratings or static displays. Default false
size?	RatingSize	Size preset for rating elements Default RatingSize.Medium
style?	CSSProperties	Inline styles for the root element
tokens?	IRatingTokens	Customization tokens for styling
value	number	Current rating value (supports decimals like 2.5 for half-filled elements)
variant?	RatingVariant	Visual variant for rating elements Default RatingVariant.Star