Hakumi :: Rails ViewComponents

Text Input

A basic widget for getting the user input is a text field.

.com

Code

<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::Input::Component.new(
      name: "basic",
      placeholder: "Basic usage"
    ) %>

    <%= render Hakumi::Input::Component.new(
      name: "with_label",
      label: "Username",
      placeholder: "Enter your username"
    ) %>

    <%= render Hakumi::Input::Component.new(
      name: "with_prefix",
      label: "Email",
      prefix_icon: :user,
      placeholder: "Enter email"
    ) %>

    <%= render Hakumi::Input::Component.new(
      name: "with_suffix",
      label: "Website",
      suffix: ".com",
      placeholder: "mysite"
    ) %>

    <%= render Hakumi::Input::Component.new(
      name: "with_clear",
      label: "Clearable",
      placeholder: "Input with clear icon",
      allow_clear: true,
      value: "Some text"
    ) %>
  <% end %>
<% end %>

Password Input

Input for passwords with optional prefix.

Code

<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::Input::Password::Component.new(
      name: "password",
      label: "Password",
      placeholder: "Enter password"
    ) %>

    <%= render Hakumi::Input::Password::Component.new(
      name: "password_prefix",
      label: "Password with Prefix",
      prefix_icon: :lock,
      placeholder: "Enter password"
    ) %>
  <% end %>
<% end %>

Text Area

Multi-line input with optional character count.

Code

<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::Input::TextArea::Component.new(
      name: "textarea",
      label: "Biography",
      placeholder: "Tell us about yourself",
      rows: 4
    ) %>

    <%= render Hakumi::Input::TextArea::Component.new(
      name: "textarea_count",
      label: "Description",
      placeholder: "Max 200 characters",
      rows: 4,
      show_count: true,
      maxlength: 200
    ) %>
  <% end %>
<% end %>

Sizes

Inputs support small, middle, and large sizes.

Code

<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::Input::Component.new(
      name: "small",
      size: :small,
      placeholder: "Small input"
    ) %>

    <%= render Hakumi::Input::Component.new(
      name: "middle",
      size: :middle,
      placeholder: "Middle input (default)"
    ) %>

    <%= render Hakumi::Input::Component.new(
      name: "large",
      size: :large,
      placeholder: "Large input"
    ) %>
  <% end %>
<% end %>

Disabled

Inputs can be disabled.

Code

<%= render Hakumi::Card::Component.new do %>
  <%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do %>
    <%= render Hakumi::Input::Component.new(
      name: "disabled",
      placeholder: "Disabled input",
      disabled: true,
      value: "Disabled value"
    ) %>
  <% end %>
<% end %>

Input API

Prop	Type	Default	Description
`name`	`String or Symbol`	`required`	Field name/id.
`label`	`String`	`-`	Optional label above the control.
`caption`	`String`	`-`	Helper text displayed below the field.
`value`	`String`	`-`	Initial value.
`placeholder`	`String`	`-`	Placeholder text.
`type`	`Symbol`	`:text`	Native input type (text, email, number, etc.).
`size`	`:small \| :middle or :large`	`:middle`	Control height/padding.
`disabled`	`Boolean`	`false`	Disable interactions.
`readonly`	`Boolean`	`false`	Make field read-only.
`required`	`Boolean`	`false`	Adds required attribute.
`prefix`	`String or ViewComponent`	`-`	Custom prefix content.
`suffix`	`String or ViewComponent`	`-`	Custom suffix content.
`prefix_icon`	`Symbol`	`-`	Icon rendered as prefix.
`suffix_icon`	`Symbol`	`-`	Icon rendered as suffix.
`allow_clear`	`Boolean`	`false`	Shows clear icon to reset value.
`maxlength`	`Integer`	`-`	Max characters allowed.
`rules`	`Array of Hashes`	`-`	Client-side validation rules (enables Stimulus controller).
`errors`	`Array[String] or String`	`[]`	Error messages shown below.
`object`	`ActiveModel`	`-`	Optional model for error binding.
`**html_options`	`Keyword args`	`-`	`class`, `id`, `data`, `wrapper_class`, etc. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

Input::Password API

Prop	Type	Default	Description
`(inherits Input props)`	`-`	`-`	Accepts every option from Input.
`suffix`	`String or ViewComponent`	`-`	Extra suffix content shown before the visibility toggle.

Input::TextArea API

Prop	Type	Default	Description
`name`	`String or Symbol`	`required`	Textarea field name/id.
`label`	`String`	`-`	Optional label.
`caption`	`String`	`-`	Helper text.
`value`	`String`	`-`	Initial text.
`placeholder`	`String`	`-`	Placeholder text.
`size`	`:small \| :middle or :large`	`:middle`	Typography size class.
`rows`	`Integer`	`4`	Visible rows.
`disabled`	`Boolean`	`false`	Disable textarea.
`readonly`	`Boolean`	`false`	Read-only textarea.
`required`	`Boolean`	`false`	Adds required attribute.
`show_count`	`Boolean`	`false`	Display character counter.
`maxlength`	`Integer`	`-`	Limit characters (required for show_count to display max).
`autosize`	`Boolean`	`false`	Enable auto height via Stimulus.
`errors`	`Array[String] or String`	`[]`	Error messages.
`object`	`ActiveModel`	`-`	Optional model for binding.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into `<textarea>`. Pass as kwargs (e.g., `class:`, `style:`, `data:`).