Hakumi :: Rails ViewComponents

Basic

Basic color picker with a clear button.

Default

With Text

#1677ff

With Clear Button

#52c41a

Disabled

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      Default
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_default",
      value: "#1677ff"
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      With Text
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_with_text",
      value: "#1677ff",
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      With Clear Button
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_clearable",
      value: "#52c41a",
      allow_clear: true,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      Disabled
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_disabled",
      value: "#ff4d4f",
      disabled: true
    ) %>
  <% end %>
<% end %>

Presets

Preset grid for quick selections.

Default Presets (12 recommended colors)

#1677ff

Custom Presets (Array)

#9254de

Grouped Presets

#1677ff

Default + Custom Presets

#722ed1

No Presets

#fa8c16

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      Default Presets (12 recommended colors)
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_default_presets",
      value: "#1677ff",
      show_preset_colors: true,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      Custom Presets (Array)
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_custom_array",
      value: "#9254de",
      show_preset_colors: false,
      presets: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      Grouped Presets
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_grouped_presets",
      value: "#1677ff",
      show_preset_colors: false,
      presets: [
        { label: "Brand", colors: ["#1677ff", "#0050b3", "#003a8c"] },
        { label: "Success", colors: ["#52c41a", "#237804", "#135200"] },
        { label: "Warning", colors: ["#faad14", "#d48806", "#ad6800"] },
        { label: "Error", colors: ["#ff4d4f", "#cf1322", "#a8071a"] }
      ],
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      Default + Custom Presets
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_combined_presets",
      value: "#722ed1",
      show_preset_colors: true,
      presets: [
        { label: "My Colors", colors: ["#722ed1", "#531dab", "#391085"] }
      ],
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      No Presets
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_no_presets",
      value: "#fa8c16",
      show_preset_colors: false,
      show_text: true
    ) %>
  <% end %>
<% end %>

Sizes

Small, middle, and large trigger sizes.

Small (24px)

#722ed1

Middle (32px)

#1677ff

Large (40px)

#52c41a

Code

<%= render Hakumi::Space::Component.new(size: :large, align: :start) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do |inner_space| %>
      <% inner_space.with_item do %>
        <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
          Small (24px)
        <% end %>
      <% end %>
      <% inner_space.with_item do %>
        <%= render Hakumi::ColorPicker::Component.new(
          name: "color_small",
          value: "#722ed1",
          size: :small,
          show_text: true
        ) %>
      <% end %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do |inner_space| %>
      <% inner_space.with_item do %>
        <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
          Middle (32px)
        <% end %>
      <% end %>
      <% inner_space.with_item do %>
        <%= render Hakumi::ColorPicker::Component.new(
          name: "color_middle",
          value: "#1677ff",
          size: :middle,
          show_text: true
        ) %>
      <% end %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Space::Component.new(direction: :vertical, size: :small) do |inner_space| %>
      <% inner_space.with_item do %>
        <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
          Large (40px)
        <% end %>
      <% end %>
      <% inner_space.with_item do %>
        <%= render Hakumi::ColorPicker::Component.new(
          name: "color_large",
          value: "#52c41a",
          size: :large,
          show_text: true
        ) %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Formats

Color format options: HEX, RGB, HSL.

HEX Only (no format selector)

#1677ff

RGB Only (no format selector)

rgb(22, 119, 255)

HSL Only (no format selector)

hsl(215, 100%, 55%)

All Formats (with format selector)

#1677ff

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      HEX Only (no format selector)
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_hex",
      value: "#1677ff",
      format: :hex,
      show_format_select: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      RGB Only (no format selector)
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_rgb",
      value: "rgb(22, 119, 255)",
      format: :rgb,
      show_format_select: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      HSL Only (no format selector)
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_hsl",
      value: "hsl(215, 100%, 55%)",
      format: :hsl,
      show_format_select: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
      All Formats (with format selector)
    <% end %>
    <%= render Hakumi::ColorPicker::Component.new(
      name: "color_all_formats",
      value: "#1677ff",
      format: :hex,
      show_format_select: true,
      show_text: true
    ) %>
  <% end %>
<% end %>

Disabled

Disabled state without trigger text.

Code

<div style="max-width: 240px;">
  <%= render Hakumi::ColorPicker::Component.new(
    name: "color_disabled",
    value: "#f5222d",
    disabled: true,
    show_text: false
  ) %>
</div>

ColorPicker Props

Prop	Type	Default	Description
`value`	`String`	`-`	Current color value.
`default_value`	`String`	`-`	Initial color when value is nil.
`format`	`Symbol`	`:hex`	Input format (:hex, :rgb, :hsl).
`show_text`	`Boolean`	`true`	Show the color value in the trigger.
`disabled`	`Boolean`	`false`	Disable the picker.
`allow_clear`	`Boolean`	`false`	Show clear button in trigger.
`presets`	`Array or Hash`	`[]`	Preset color groups.
`size`	`Symbol`	`:middle`	Size variant (:small, :middle, :large).
`trigger`	`Symbol`	`:click`	Open trigger (:click, :hover).
`name`	`String or Symbol`	`auto`	Hidden input name/id.
`label`	`String`	`-`	Label text when used in forms.
`caption`	`String`	`-`	Caption text below the control.
`errors`	`Array[String] or String`	`[]`	Error messages.
`standalone`	`Boolean`	`true`	Render without FormItem wrapper.
`**html_attrs`	`Keyword args`	`-`	Additional HTML attributes for the wrapper.

ColorPicker JavaScript API (element.hakumiComponent.api)

Prop	Type	Default	Description
`getValue()`	`Function`	`-`	Return current color value.
`setValue(value)`	`Function`	`-`	Set the current color value.
`open()`	`Function`	`-`	Open the panel.
`close()`	`Function`	`-`	Close the panel.
`toggle()`	`Function`	`-`	Toggle the panel.
`clear()`	`Function`	`-`	Clear the selected value.
`getFormat()`	`Function`	`-`	Return current input format.
`setFormat(format)`	`Function`	`-`	Update input format label.

ColorPicker Events

Prop	Type	Default	Description
`hakumi:color-picker:change`	`CustomEvent`	`-`	Fires when the value changes. Detail: { value, format }.
`hakumi:color-picker:open-change`	`CustomEvent`	`-`	Fires when the panel opens/closes. Detail: { open }.