Hakumi :: Rails ViewComponents

Basic Usage

Select a time from the dropdown.

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, style: "width: 100%") do %>
  <%= render Hakumi::TimePicker::Component.new(
    name: :start_time,
    placeholder: "Select time",
    show_now: true
  ) %>

  <%= render Hakumi::TimePicker::Component.new(
    name: :end_time,
    placeholder: "Select time",
    value: "14:30:45",
    show_now: true,
    allow_clear: true
  ) %>
<% end %>

Sizes

Three sizes available: small, middle (default), and large.

Code

<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::TimePicker::Component.new(
      name: "small_time",
      size: :small,
      placeholder: "Small",
      value: "14:30:00",
      show_now: true
    ) %>

    <%= render Hakumi::TimePicker::Component.new(
      name: "middle_time",
      size: :middle,
      placeholder: "Middle (default)",
      value: "14:30:00",
      show_now: true
    ) %>

    <%= render Hakumi::TimePicker::Component.new(
      name: "large_time",
      size: :large,
      placeholder: "Large",
      value: "14:30:00",
      show_now: true
    ) %>
  <% end %>
<% end %>

Variants

Different input styles: default (outlined), borderless, and filled.

Code

<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::TimePicker::Component.new(
      name: "default_variant",
      variant: :default,
      placeholder: "Default (Outlined)",
      value: "14:30:00",
      show_now: true
    ) %>

    <%= render Hakumi::TimePicker::Component.new(
      name: "borderless_variant",
      variant: :borderless,
      placeholder: "Borderless",
      value: "14:30:00",
      show_now: true
    ) %>

    <%= render Hakumi::TimePicker::Component.new(
      name: "filled_variant",
      variant: :filled,
      placeholder: "Filled",
      value: "14:30:00",
      show_now: true
    ) %>
  <% end %>
<% end %>

12-Hour Format

Use a 12-hour time picker with AM/PM period selection.

Code

<div class="playground-preview-row">
  <%= render Hakumi::TimePicker::Component.new(
    name: :appointment_time,
    use_12_hours: true,
    format: "hh:mm:ss A",
    placeholder: "Select time",
    show_now: true
  ) %>
</div>

Step Intervals

Configure hour/minute/second steps to limit available times.

Code

<div class="playground-preview-row">
  <%= render Hakumi::TimePicker::Component.new(
    name: :step_time,
    format: "HH:mm",
    hour_step: 2,
    minute_step: 15,
    placeholder: "Every 15 minutes"
  ) %>
</div>

Allow Clear

Enable a clear button to reset the selection.

Code

<div class="playground-preview-row">
  <%= render Hakumi::TimePicker::Component.new(
    name: :clearable_time,
    allow_clear: true,
    default_value: "10:15:00"
  ) %>
</div>

Disabled

Disable user interaction with the time picker.

Code

<div class="playground-preview-row">
  <%= render Hakumi::TimePicker::Component.new(
    name: :disabled_time,
    value: "09:30:00",
    disabled: true
  ) %>
</div>

TimePicker API

Prop	Type	Default	Description
`name`	`String or Symbol`	`auto`	Field name/id used for the input. Auto-generated if not provided.
`value`	`String`	`-`	Controlled value for the input.
`default_value`	`String`	`-`	Initial value when uncontrolled.
`format`	`String`	`HH:mm:ss`	Display format for the time string.
`hour_step`	`Integer`	`1`	Step interval for hours.
`minute_step`	`Integer`	`1`	Step interval for minutes.
`second_step`	`Integer`	`1`	Step interval for seconds.
`use_12_hours`	`Boolean`	`false`	Enable 12-hour mode with AM/PM.
`show_now`	`Boolean`	`true`	Show the Now shortcut in the dropdown.
`disabled`	`Boolean`	`false`	Disable user interaction.
`allow_clear`	`Boolean`	`false`	Show a clear button when a value is present.
`placeholder`	`String`	`-`	Placeholder text shown when empty.
`size`	`:small \| :middle \| :large`	`:middle`	Size of the time picker.
`variant`	`:default \| :borderless \| :filled`	`:default`	Input style variant.
`label`	`String`	`-`	Optional label.
`caption`	`String`	`-`	Helper text below the field.
`errors`	`Array[String] or String`	`[]`	Error messages.
`standalone`	`Boolean`	`true`	Render without form wrappers (label, caption, errors).
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the wrapper. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

JavaScript API (element.hakumiTimePicker)

Prop	Type	Default	Description
`getValue()`	`Function`	`-`	Get the current value.
`setValue(value)`	`Function`	`-`	Set the value programmatically.
`open()`	`Function`	`-`	Open the dropdown.
`close()`	`Function`	`-`	Close the dropdown.
`toggle()`	`Function`	`-`	Toggle the dropdown.
`clear()`	`Function`	`-`	Clear the current value.
`focus()`	`Function`	`-`	Focus the input.
`blur()`	`Function`	`-`	Blur the input.
`setNow()`	`Function`	`-`	Set the value to the current time.

Events

Prop	Type	Default	Description
`hakumi:time-picker:change`	`CustomEvent`	`-`	Triggered when the value changes. Detail: { value, hour, minute, second, period }.
`hakumi:time-picker:open-change`	`CustomEvent`	`-`	Triggered when the dropdown opens/closes. Detail: { open }.