Hakumi :: Rails ViewComponents

Basic

Display a simple rating with a default value.

★ ★ ★ ★ ★ ★ ★ ★ ★ ★

Code

<%= render Hakumi::Rate::Component.new(name: "rate_basic", default_value: 3) %>

Half Star

Enable half selection when allow_half is true.

★ ★ ★ ★ ★ ★ ★ ★ ★ ★

Code

<%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
  <%= render Hakumi::Rate::Component.new(name: "rate_half_1", allow_half: true, default_value: 2.5) %>
  <%= render Hakumi::Rate::Component.new(name: "rate_half_2", allow_half: true, default_value: 3.3, allow_clear: true) %>
<% end %>

Tooltips

Provide an array of tooltip labels for each value.

Code

<%= render Hakumi::Rate::Component.new(
  name: "rate_tooltips",
  tooltips: ["Terrible", "Bad", "Normal", "Good", "Wonderful"],
  default_value: 4
) %>

Custom Character

Swap the default star with a custom character.

♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥

Code

<%= render Hakumi::Rate::Component.new(name: "rate_custom", character: "♥", default_value: 3) %>

Disabled & Readonly

Disable interactions or render a readonly rating.

★ ★ ★ ★ ★ ★ ★ ★ ★ ★

Toggle disabled state via API:

★ ★ ★ ★ ★ ★ ★ ★ ★ ★

Toggle readonly state via API:

★ ★ ★ ★ ★ ★ ★ ★ ★ ★

Toggle allow_half via API:

★ ★ ★ ★ ★ ★ ★ ★ ★ ★

Control value programmatically:

★ ★ ★ ★ ★ ★ ★ ★ ★ ★

Code

<%= render Hakumi::Space::Component.new(size: :large, direction: :vertical, align: :start) do %>
  <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
    <%= render Hakumi::Rate::Component.new(name: "rate_disabled", default_value: 2, disabled: true) %>
    <%= render Hakumi::Rate::Component.new(name: "rate_readonly", default_value: 4, readonly: true) %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Toggle disabled state via API:</p>
    <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
      <%= render Hakumi::Rate::Component.new(
        id: "rate-disabled-demo",
        default_value: 3,
        disabled: true
      ) %>
      <%= render Hakumi::Button::Component.new(
        size: :small,
        onclick: "document.getElementById('rate-disabled-demo').hakumiComponent.api.toggleDisabled()"
      ) do %>
        Toggle Disabled
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Toggle readonly state via API:</p>
    <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
      <%= render Hakumi::Rate::Component.new(
        id: "rate-readonly-demo",
        default_value: 4
      ) %>
      <%= render Hakumi::Button::Component.new(
        size: :small,
        onclick: "document.getElementById('rate-readonly-demo').hakumiComponent.api.toggleReadonly()"
      ) do %>
        Toggle Readonly
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Toggle allow_half via API:</p>
    <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
      <%= render Hakumi::Rate::Component.new(
        id: "rate-half-demo",
        default_value: 2.5,
        allow_half: true
      ) %>
      <%= render Hakumi::Button::Component.new(
        size: :small,
        onclick: "document.getElementById('rate-half-demo').hakumiComponent.api.toggleAllowHalf()"
      ) do %>
        Toggle Half Mode
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Control value programmatically:</p>
    <%= render Hakumi::Space::Component.new(size: :middle, align: :center) do %>
      <%= render Hakumi::Rate::Component.new(
        id: "rate-value-demo",
        default_value: 3
      ) %>
      <%= render Hakumi::Button::Component.new(
        size: :small,
        onclick: "document.getElementById('rate-value-demo').hakumiComponent.api.setValue(5)"
      ) do %>
        Set to 5
      <% end %>
      <%= render Hakumi::Button::Component.new(
        size: :small,
        onclick: "document.getElementById('rate-value-demo').hakumiComponent.api.clear()"
      ) do %>
        Clear
      <% end %>
    <% end %>
  <% end %>
<% end %>

Rate API

Prop	Type	Default	Description
`count`	`Integer`	`5`	Number of stars to display.
`value`	`Float`	`nil`	Controlled value (overrides default_value).
`default_value`	`Float`	`0`	Initial value when value is not supplied.
`allow_half`	`Boolean`	`false`	Allow half-star selection.
`allow_clear`	`Boolean`	`false`	Clicking the current value clears it.
`disabled`	`Boolean`	`false`	Disable interactions.
`readonly`	`Boolean`	`false`	Prevents changes but keeps visual state.
`tooltips`	`Array[String]`	`[]`	Tooltip labels per star.
`character`	`String or Component`	`★`	Custom character or component used for each star.
`label`	`String`	`-`	Form label when standalone is false.
`caption`	`String`	`-`	Help text below the field in form mode.
`required`	`Boolean`	`false`	Marks the field as required in form mode.
`standalone`	`Boolean`	`true`	When false, wraps in a form item.
`errors`	`Array[String]`	`[]`	Validation errors for form mode.
`name`	`String`	`rate_<random>`	Input name used in forms.
`**html_options`	`Keyword args`	`-`	Additional HTML attributes for the wrapper.

Rate JavaScript API (element.hakumiComponent.api)

Prop	Type	Default	Description
`setValue(value)`	`Function`	`-`	Set the rating value (0-5 or with decimals if allow_half).
`getValue()`	`Function`	`-`	Return the current rating value.
`clear()`	`Function`	`-`	Clear the rating (set to 0).
`setDisabled(disabled)`	`Function`	`-`	Set disabled state (true/false).
`isDisabled()`	`Function`	`-`	Return current disabled state.
`toggleDisabled()`	`Function`	`-`	Toggle disabled state.
`disable()`	`Function`	`-`	Set disabled to true.
`enable()`	`Function`	`-`	Set disabled to false.
`setReadonly(readonly)`	`Function`	`-`	Set readonly state (true/false).
`isReadonly()`	`Function`	`-`	Return current readonly state.
`toggleReadonly()`	`Function`	`-`	Toggle readonly state.
`setAllowClear(allowClear)`	`Function`	`-`	Set allow_clear state (true/false).
`isAllowClear()`	`Function`	`-`	Return current allow_clear state.
`toggleAllowClear()`	`Function`	`-`	Toggle allow_clear state.
`setAllowHalf(allowHalf)`	`Function`	`-`	Set allow_half state (true/false).
`isAllowHalf()`	`Function`	`-`	Return current allow_half state.
`toggleAllowHalf()`	`Function`	`-`	Toggle allow_half state.

Keyboard Navigation

Arrow Right / Arrow Up: Increment rating by 1 (or 0.5 if allow_half is enabled)
Arrow Left / Arrow Down: Decrement rating by 1 (or 0.5 if allow_half is enabled)
Home: Set to minimum value (0 if allow_clear, otherwise 1 or 0.5)
End: Set to maximum value (count)
Enter / Space: Toggle between 0 and maximum (only when allow_clear is enabled)