Rating

The Mishka Chelekom rating component is a Phoenix LiveView component that allows developers to create dynamic and customizable rating systems, ideal for user reviews and feedback.

This Phoenix LiveView component also supports interactive and non-interactive modes, making it perfect for both static displays and allowing users to submit ratings. With hover effects for previewing ratings and its responsive design, this rating component enhances user interaction and overall experience.

The true and false values for the interactive prop determine whether the rating component behaves interactively. When set to true, users can hover over the stars to preview their rating, and stars before the hovered one will change color as well. When set to false, the component remains static. By default, this prop is set to false.

<.rating interactive />

The count prop in the Phoenix rating component defines the number of stars to be displayed, with a default value of integer 5. This prop allows developers to specify how many rating units are shown, making it adaptable for different use cases, such as 5-star or 10-star rating systems. By adjusting the count, you can easily match the rating scale to your application's specific needs, whether it's for product reviews, feedback systems, or other rating interfaces. This prop provides flexibility in tailoring the user experience and visual design of the rating component.

<.rating count={6} />
<.rating count={8} />

The select prop in the rating component determines how many stars are selected, visually indicating the current rating by changing the background color of the stars. With a default value of 0, no stars are selected initially, but as this prop is set to a higher value, the corresponding number of stars will display as selected. This is useful for both displaying static ratings and allowing users to select their desired rating in interactive modes. The select prop provides a clear visual representation of the rating or feedback score.

<.rating />
<.rating select={3} />
<.rating select={5} />

The rating component allows you to customize the appearance of the rating stars using the color prop. This prop supports various color themes such as primary, secondary, success, and more, letting you match the rating component with the design of your application. The default color is warning, providing a yellow/gold star style typical for ratings.

<.rating color="base" />
<.rating color="natural" />
<.rating color="white" />
<.rating color="primary" />
<.rating color="secondary" />
<.rating color="success" />
<.rating color="warning" />
<.rating color="danger" />
<.rating color="info" />
<.rating color="misc" />
<.rating color="dawn" />
<.rating color="silver" />
<.rating color="dark" />

The gap prop in the rating component allows you to control the spacing between the rating stars. You can choose from predefined options like extra_small, small, medium, large, and extra_large. By default, the gap is set to small, but this can be customized to adjust the spacing based on your design needs.

<.rating gap="extra_small" />
<.rating gap="small" />
<.rating gap="medium" />
<.rating gap="large" />
<.rating gap="extra_large" />

The size prop in the rating component allows for customization of the visual scale of the stars in the rating system. With options ranging from extra_small to quadruple_large, developers can easily adjust the size to fit different design needs. Whether it's a compact display with extra_small or a more prominent visual using quadruple_large, the size prop ensures that the rating component can adapt to various UI layouts.

<.rating size="extra_small" />
<.rating size="small" />
<.rating size="medium" />
<.rating size="large" />
<.rating size="extra_large" />
<.rating size="double_large" />
<.rating size="triple_large" />
<.rating size="quadruple_large" />

The field prop enables native Phoenix form integration for the rating component. When you pass a form field struct (e.g. @form[:rating]), the component automatically renders hidden radio inputs inside each star, so the selected rating value is submitted with the form like any other input. It also enables interactive mode automatically, displays validation errors from the changeset, and extracts the name, id, and current value from the field struct.

<.rating field={@form[:rating]} size="large" color="warning" />

The disabled prop prevents user interaction with the rating component. When set to true, the component renders with reduced opacity and disables all click events. This is useful when the rating should be visible but not editable, such as when a user has already submitted a review or when the form is in a read-only state.

<.rating select={3} size="large" disabled />
<.rating select={2} size="large" interactive disabled />

The precision prop controls the granularity of the rating selection. When set to 0.5, each star is split into two click targets (left half and right half), allowing users to select half-star values like 2.5 or 3.5. The default value is 1.0 for full-star selection. Click the same value again to deselect (toggle to 0).

<.rating
  id="rating-precision"
  select={2.5}
  size="large"
  color="warning"
  precision={0.5}
  interactive
/>

This example demonstrates how to use the rating component inside a full Phoenix LiveView form with changeset validation. The form validates the rating field on the backend using an Ecto changeset, and the rating value is submitted alongside other fields. No data is saved to a database in this demo, the changeset is validated in-memory using Ecto.Changeset.apply_action/2.

<.form_wrapper for={@form} id="review-form" phx-change="validate" phx-submit="save" space="medium">
  <.text_field size="medium" field={@form[:fullname]} label="Full Name" />
  <.rating field={@form[:rating]} label="Your Rating" size="large" color="warning" precision={0.5} />
  <.textarea_field size="medium" field={@form[:comment]} label="Comment (optional)" />
  <:actions>
    <.button variant="outline" color="info" size="small" phx-disable-with="Submitting...">
      Submit Review
    </.button>
  </:actions>
</.form_wrapper>