Rating Group

A star-rating input (with a real hidden input for form submission). Item index comes from DOM order, so just list count items.

Your rating

★ ★ ★ ★ ★

<div
  data-controller="zag-rating-group"
  data-part="root"
  data-zag-rating-group-name-value="rating"
  data-zag-rating-group-value-value="3"
  class="flex items-center gap-2"
>
  <span data-part="label" class="text-sm font-medium">Your rating</span>
  <div data-part="control" class="flex">
    <span
      data-part="item"
      class="text-muted-foreground cursor-pointer text-2xl data-[highlighted]:text-yellow-400"
      >★</span
    >
    <span
      data-part="item"
      class="text-muted-foreground cursor-pointer text-2xl data-[highlighted]:text-yellow-400"
      >★</span
    >
    <span
      data-part="item"
      class="text-muted-foreground cursor-pointer text-2xl data-[highlighted]:text-yellow-400"
      >★</span
    >
    <span
      data-part="item"
      class="text-muted-foreground cursor-pointer text-2xl data-[highlighted]:text-yellow-400"
      >★</span
    >
    <span
      data-part="item"
      class="text-muted-foreground cursor-pointer text-2xl data-[highlighted]:text-yellow-400"
      >★</span
    >
  </div>
  <input data-part="hidden-input" class="sr-only" />
</div>

Parts

root, label, control, item, hidden-input.

Values

Attribute	Type	Default	Description
data-zag-rating-group-value-value	Number	0	Rating selected by default.
data-zag-rating-group-count-value	Number	5	Number of items.
data-zag-rating-group-name-value	String	""	name of the hidden input (for forms).
data-zag-rating-group-allow-half-value	Boolean	false	Allow half-star ratings.
data-zag-rating-group-disabled-value	Boolean	false	Disable the control.
data-zag-rating-group-read-only-value	Boolean	false	Read-only (display a rating).
data-zag-rating-group-required-value	Boolean	false	Mark the field required.

Events

Emits zag-rating-group:change — detail is { value }.

Programmatic control

value (getter, 0 when unrated), setValue(value).