# `PhiaUi.Components.Rating`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/rating.ex#L1)

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

# `form_rating`

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`

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"]`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*