PhiaUi.Components.Rating (phia_ui v0.1.17)

Copy Markdown View Source

Star Rating component for PhiaUI.

CSS-only implementation using native radio inputs and SVG star icons. Supports read-only display and interactive selection. Form integration is available via form_rating/1.

Examples

<%!-- Display only --%>
<.rating value={4} readonly={true} />

<%!-- Interactive --%>
<.rating value={@rating} phx-change="set_rating" />

<%!-- Form-integrated --%>
<.form_rating field={@form[:rating]} label="Rating" />

<%!-- Large size --%>
<.rating value={3} size="lg" />

<%!-- Half-star display --%>
<.rating value={3.5} half={true} readonly={true} />

<%!-- Heart icon --%>
<.rating value={4} icon={:heart} />

<%!-- With hover labels --%>
<.rating value={3} labels={["Poor", "Fair", "Good", "Great", "Excellent"]} />

Summary

Functions

form_rating(assigns)

Renders a form-integrated star rating with label, description, and errors.

rating(assigns)

Renders a star rating with radio inputs.

Functions

form_rating(assigns)

Renders a form-integrated star rating with label, description, and errors.

Attributes

  • field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField struct.
  • label (:string) - Label text. Defaults to nil.
  • description (:string) - Helper text. Defaults to nil.
  • max (:integer) - Maximum number of stars. Defaults to 5.
  • size (:string) - Star size. Defaults to "default". Must be one of "sm", "default", or "lg".
  • half (:boolean) - Enable half-star display for float values. Defaults to false.
  • icon (:atom) - Icon style. Defaults to :star. Must be one of :star, :heart, or :thumb.
  • labels (:list) - Hover label strings per position. Defaults to [].
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to fieldset. Supports all globals plus: ["phx-change", "phx-blur", "phx-debounce"].

rating(assigns)

Renders a star rating with radio inputs.

When half=false (default): integer-only values, simple SVG path per star. When half=true: float values display with a clip overlay (50% fill for .5 values). The icon attr switches the SVG shape to :star, :heart, or :thumb. The labels list adds title tooltip text to each star label.

Attributes

  • value (:any) - Current rating value (0 to max). Float when half=true. Defaults to 0.
  • max (:integer) - Maximum number of stars. Defaults to 5.
  • readonly (:boolean) - Whether the rating is read-only. Defaults to false.
  • size (:string) - Size of the stars. Defaults to "default". Must be one of "sm", "default", or "lg".
  • name (:string) - Input name attribute. Defaults to "rating".
  • half (:boolean) - Enable half-star display for float values. Defaults to false.
  • icon (:atom) - Icon style. Defaults to :star. Must be one of :star, :heart, or :thumb.
  • labels (:list) - Hover label strings per position (e.g. ['Poor','Good']). Defaults to [].
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the fieldset. Supports all globals plus: ["phx-change", "phx-blur", "id"].