Rating

Rating Component

The Rating component provides an interactive star rating input. Users can select a rating by clicking on stars, which are customizable in count and icon style. It supports tooltips, validation messages, and optional hints below the stars.

Example Usage

<x-rating tooltip="Rate this product" amount="6" current="3" icon="icon-star" />

Props

• amount (int, default: 5)
  The total number of stars to display for the rating scale.

• current (int, default: 0)
  The currently selected rating value.

• icon (string, default: "icon-star")
  The CSS class name for the icon used to represent each star.

• hint (string|null)
  Optional helper text shown below the stars for additional context.

• uuid (string|null)
  Unique identifier for the component instance to ensure unique input IDs; auto-generated if not provided.

• tooltip (string|null)
  Text shown as a tooltip when hovering over the stars.

• showRequired (bool, default: false)
  Flag to indicate whether to show a required field marker (not currently rendered by default).

• showValidation (bool, default: false)
  Enables showing validation error messages if the component is used with Livewire and validation errors exist.

Overview

The Rating component allows users to select a numeric rating visually through star icons. It is fully accessible with screen-reader labels, supports dynamic tooltips, and integrates with validation frameworks like Livewire. The star icons highlight dynamically based on the current selection and can be customized in quantity and style. Tailwind CSS classes are used for styling and smooth hover animations.