Hakumi :: Rails ViewComponents

Basic

Basic usage of radio.

Option A

Option B

Code

<%= render Hakumi::Space::Component.new(size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Radio::Component.new(name: "basic-radio", value: "a", text: "Option A", checked: true) %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Radio::Component.new(name: "basic-radio", value: "b", text: "Option B") %>
  <% end %>
<% end %>

Group

Generate a radio group from options.

Apple Pear Orange

Code

<%= render Hakumi::Radio::Group::Component.new(
  name: "group-radio",
  value: "pear",
  options: [
    { label: "Apple", value: "apple" },
    { label: "Pear", value: "pear" },
    { label: "Orange", value: "orange" }
  ]
) %>

Button Style

Radio group rendered as buttons.

Button (outline):

Left Center Right

Solid:

Left Center Right

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <p style="margin-bottom: 8px; color: var(--color-text-secondary);">Button (outline):</p>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "button-radio-outline",
      value: "left",
      variant: :button,
      options: [
        { label: "Left", value: "left" },
        { label: "Center", value: "center" },
        { label: "Right", value: "right" }
      ]
    ) %>
  <% end %>

  <% space.with_item do %>
    <p style="margin-bottom: 8px; color: var(--color-text-secondary);">Solid:</p>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "button-radio-solid",
      value: "center",
      variant: :solid,
      options: [
        { label: "Left", value: "left" },
        { label: "Center", value: "center" },
        { label: "Right", value: "right" }
      ]
    ) %>
  <% end %>
<% end %>

Sizes

Radio button group sizes.

Small Medium Large

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "size-radio-small",
      value: "Small",
      variant: :button,
      size: :small,
      options: [ "Small", "Medium", "Large" ]
    ) %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "size-radio-middle",
      value: "Medium",
      variant: :button,
      size: :middle,
      options: [ "Small", "Medium", "Large" ]
    ) %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "size-radio-large",
      value: "Large",
      variant: :button,
      size: :large,
      options: [ "Small", "Medium", "Large" ]
    ) %>
  <% end %>
<% end %>

Disabled

Disabled radios and groups.

Code

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Radio::Component.new(name: "disabled-radio", value: "a", text: "Disabled", disabled: true) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "disabled-group",
      value: "left",
      variant: :button,
      disabled: true,
      options: [ "Left", "Right" ]
    ) %>
  <% end %>

  <% space.with_item do %>
    <p style="margin-bottom: 8px; color: var(--color-text-secondary);">Individual options disabled:</p>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "individual-disabled-buttons",
      value: "beijing",
      variant: :button,
      options: [
        { label: "Hangzhou", value: "hangzhou" },
        { label: "Shanghai", value: "shanghai", disabled: true },
        { label: "Beijing", value: "beijing" },
        { label: "Chengdu", value: "chengdu", disabled: true }
      ]
    ) %>
  <% end %>

  <% space.with_item do %>
    <p style="margin-bottom: 8px; color: var(--color-text-secondary);">Individual options disabled (default style):</p>
    <%= render Hakumi::Radio::Group::Component.new(
      name: "individual-disabled-default",
      value: "apple",
      options: [
        { label: "Apple", value: "apple" },
        { label: "Pear", value: "pear", disabled: true },
        { label: "Orange", value: "orange" }
      ]
    ) %>
  <% end %>
<% end %>

Vertical

Vertical radio group layout.

Option A Option B Option C

Code

<%= render Hakumi::Radio::Group::Component.new(
  name: "vertical-radio",
  value: "b",
  direction: :vertical,
  options: [
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" }
  ]
) %>