Hakumi :: Rails ViewComponents

Basic Usage

Basic usage of the Select component.

Select a country

Code

<%= render Hakumi::Select::Component.new(
  name: "country",
  options: [["USA", "us"], ["Canada", "ca"], ["Mexico", "mx"], ["UK", "uk"], ["Germany", "de"]],
  label: "Country",
  placeholder: "Select a country"
) %>

Searchable

Select with search field to filter options.

Code

<%= render Hakumi::Select::Component.new(
  name: "searchable",
  options: [["Apple", "apple"], ["Banana", "banana"], ["Cherry", "cherry"], ["Date", "date"], ["Elderberry", "elderberry"]],
  label: "Searchable",
  placeholder: "Type to search...",
  show_search: true,
  allow_clear: true
) %>

With Clear Button

Select with a clear button to reset the value.

New York

Code

<%= render Hakumi::Select::Component.new(
  name: "city",
  options: [["New York", "ny"], ["Los Angeles", "la"], ["Chicago", "chi"], ["Houston", "hou"]],
  label: "City",
  placeholder: "Select a city",
  value: "ny",
  allow_clear: true
) %>

Sizes

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

Small select

Middle select

Large select

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render Hakumi::Select::Component.new(
    name: "size_small",
    options: [["Option 1", "1"], ["Option 2", "2"], ["Option 3", "3"]],
    label: "Small",
    size: :small,
    placeholder: "Small select"
  ) %>

  <%= render Hakumi::Select::Component.new(
    name: "size_middle",
    options: [["Option 1", "1"], ["Option 2", "2"], ["Option 3", "3"]],
    label: "Middle (Default)",
    size: :middle,
    placeholder: "Middle select"
  ) %>

  <%= render Hakumi::Select::Component.new(
    name: "size_large",
    options: [["Option 1", "1"], ["Option 2", "2"], ["Option 3", "3"]],
    label: "Large",
    size: :large,
    placeholder: "Large select"
  ) %>
<% end %>

Disabled

Disabled state of the Select component.

Option 1

Code

<%= render Hakumi::Select::Component.new(
  name: "disabled",
  options: [["Option 1", "1"], ["Option 2", "2"]],
  label: "Disabled Select",
  value: "1",
  disabled: true
) %>

Select API

Prop	Type	Default	Description
`name`	`String or Symbol`	`auto`	Field name/id used for the hidden input. Auto-generated if not provided.
`options`	`Array`	`[]`	Array of [label, value] pairs or strings.
`label`	`String`	`-`	Optional label.
`caption`	`String`	`-`	Helper text below the field.
`value`	`String`	`-`	Selected value.
`placeholder`	`String`	`-`	Placeholder shown when no value selected.
`size`	`:small \| :middle or :large`	`:middle`	Display size.
`disabled`	`Boolean`	`false`	Disable selection.
`required`	`Boolean`	`false`	Adds required attribute.
`allow_clear`	`Boolean`	`false`	Show clear icon to reset value.
`show_search`	`Boolean`	`false`	Enable filtering input.
`errors`	`Array[String] or String`	`[]`	Error messages.
`object`	`ActiveModel`	`-`	Optional model for errors.
`standalone`	`Boolean`	`false`	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.hakumiSelect)

Prop	Type	Default	Description
`getValue()`	`Function`	`-`	Get current selected value.
`setValue(value)`	`Function`	`-`	Set selected value programmatically.
`getLabel()`	`Function`	`-`	Get current selected label text.
`open()`	`Function`	`-`	Open the dropdown.
`close()`	`Function`	`-`	Close the dropdown.
`clear()`	`Function`	`-`	Clear the selected value.
`isOpen()`	`Function`	`-`	Check if dropdown is open.

Events

Prop	Type	Default	Description
`hakumi--select:change`	`CustomEvent`	`-`	Triggered when selection changes. Detail: { value, label }.