Rating

Usage

import {
  Rating,
  RatingContext,
  RatingControl,
  RatingItem,
} from "@kanzo-tech/ui";

<Rating count={5} defaultValue={3}>
  <RatingControl>
    <RatingContext>
      {(api) =>
        api.items.map((index) => <RatingItem index={index} key={index} />)
      }
    </RatingContext>
  </RatingControl>
</Rating>

Anatomy

Rating
├── RatingLabel
├── RatingControl
│   └── RatingContext        renders one star per item
│       └── RatingItem
└── RatingHiddenInput

API Reference

Rating

No props of its own — the API is the machine's:

Extends React.ComponentProps<typeof ArkRatingGroup.Root>, so name, form, onHoverChange, ref and every native prop pass through. Control it with value + onValueChange, or leave it uncontrolled with defaultValue. There is no invalid on this machine; the recipe still styles data-invalid for a Field that sets it.

RatingItem

The default star reads data-highlighted to fill and data-half (from allowHalf) to clip itself in half. Pass children to swap the glyph and keep the machine's wiring.

Other parts

RatingLabel renders Ark's RatingGroup.Label inside a FieldLabel; RatingControl and RatingHiddenInput take their Ark part's props. RatingContext is Ark's RatingGroup.Context render prop — iterate api.items with it. useRating re-exports useRatingGroupContext.