RatingGroup

Set the star count, value, size, and variant. The machine manages keyboard input, hover preview, and form behavior.

import { RatingGroup } from '@manti-ui/react';

export default function RatingGroupBasic() {
  return (
    <RatingGroup
      label="Rate this recipe"
      count={5}
      defaultValue={3}
      variant="primary"
    />
  );
}

Half values

Rate this recipe

Sizes

Small

Medium

Large

API

Prop	Type	Default	Description
`count`	`number`	`5`	Number of rating icons.
`label`	`ReactNode`	—	Optional label.
`variant`	`MantiVariant`	`'primary'`	Filled-icon variant.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`allowHalf`	`boolean`	—	Allow half-star precision.
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	—	Initial value for uncontrolled usage.
`onValueChange`	`(value: number) => void`	—	Called whenever the value changes.
`readOnly`	`boolean`	—	Display the rating without allowing edits.
`disabled`	`boolean`	—	Disable the control.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="rating-group"][data-part="root"]`	The control wrapper.
`label`	`[data-scope="rating-group"][data-part="label"]`	The optional label.
`control`	`[data-scope="rating-group"][data-part="control"]`	The row of rating icons.
`item`	`[data-scope="rating-group"][data-part="item"]`	Each individual rating icon.
`star-bg`	`[data-scope="rating-group"][data-part="star-bg"]`	The empty (background) star layer.
`star-fill`	`[data-scope="rating-group"][data-part="star-fill"]`	The filled star layer.

Tokens

Token	Controls
`--manti-rating-group-size`	size

Last updated 13 September 2026