Rating

New version v0.0.9 🚀

Interactive rating component for Phoenix LiveView with customizable stars, colors, sizes, hover effects, and native Phoenix form integration via the field prop.

Installation:

mix mishka.ui.gen.component rating

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

Overview of the Phoenix and LiveView Rating Component

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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.

Interactive prop

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.

When a star is clicked, an event called rating that sends the values of "action" => "select" and "number" => number of selected to the server.

The validation of the data that the user must send is the responsibility of the developer. This part should be handled in the backend. For more information on security aspects, please visit the security section .

<.rating interactive />

Count prop

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} />

Select prop

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} />

Color prop

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" />

Gap prop

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" />

Size prop

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" />

Field prop

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.

When using the field prop, you do not need to set interactive or select manually. The component reads the current value from the form field and enables interactivity automatically.

The field prop works with any Ecto changeset. Define your rating field as :integer (or :float when using precision=0.5) in your schema and add validations like validate_number(:rating, greater_than_or_equal_to: 0, less_than_or_equal_to: 5) to enforce valid ratings on the backend.

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

Disabled prop

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 />

Precision prop

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
/>

Real world example

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.

Rating Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
gap	string	No	Custom gap style. Default is small.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is small.
color	string	No	Determines the color theme of the rating. Supported values: base, natural, primary, secondary, success, warning, danger, info, dark, white, silver, misc, dawn. Default is warning.
count	integer	No	Number of stars to display. Default is 5.
select	integer	No	Initial selected rating value. Default is 0.
field	Phoenix.HTML.FormField	No	A form field struct retrieved from the form, for example: @form[:rating]. When provided, the component renders hidden radio inputs for native form submission, auto-enables interactive mode, and displays changeset validation errors.
label	string	No	Specifies text for the label displayed above the rating stars. Default is nil.
name	string	No	Name of input. Automatically extracted when using the field prop. Default is nil.
errors	list	No	List of error messages to be displayed. Automatically populated when using the field prop. Default is [].
error_icon	string	No	Icon to be displayed alongside error messages. Default is nil.
params	map	No	A map of additional parameters used for element configuration.
on_action	JS	No	Custom JS module for the on_action action.
interactive	boolean	No	If true, stars are wrapped in a clickable element for selecting a rating. Automatically set to true when using the field prop. Default is false.
disabled	boolean	No	If true, the rating component is disabled and cannot be interacted with. Renders with reduced opacity and disables click events. Default is false.
precision	float	No	Rating precision - 1.0 for full stars, 0.5 for half-star selection. Default is 1.0.

Rating CLI Arguments

Name	Type	Options	Recommended?
`--color`	string	base - natural - white - primary - secondary - dark - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large	Yes
`--only`	string	rating	Yes
`--module`	string	Something	NO

Mishka