Radio - Hakumi Components

Basic

The simplest use of radio buttons.

Option A

Option B

Code

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

Radio Group

Generate a group of radio buttons from options array.

Apple Pear Orange

Code

<%= render HakumiComponents::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 HakumiComponents::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 HakumiComponents::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 HakumiComponents::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 in different sizes.

Small Medium Large

Code

<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Radio::Group::Component.new(
      name: "size-radio-small",
      value: "Small",
      variant: :button,
      size: :small,
      options: [ "Small", "Medium", "Large" ]
    ) %>
  <% end %>
  <% space.with_item do %>
    <%= render HakumiComponents::Radio::Group::Component.new(
      name: "size-radio-middle",
      value: "Medium",
      variant: :button,
      size: :middle,
      options: [ "Small", "Medium", "Large" ]
    ) %>
  <% end %>
  <% space.with_item do %>
    <%= render HakumiComponents::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 HakumiComponents::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Radio::Component.new(name: "disabled-radio", value: "a", text: "Disabled", disabled: true) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::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 HakumiComponents::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 HakumiComponents::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 HakumiComponents::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" }
  ]
) %>

Radio Props

Prop	Type	Default	Description
`name`	`String`	`nil`	Input name attribute (required)
`value`	`String`	`nil`	Radio button value submitted with form
`text`	`String`	`nil`	Label text (overridden by block content)
`label`	`String`	`nil`	Form field label text
`caption`	`String`	`nil`	Helper text displayed below the radio
`checked`	`Boolean`	`false`	Initial checked state
`disabled`	`Boolean`	`false`	Disable the radio button
`size`	`Symbol`	`:middle`	Radio button size
`id`	`String`	`auto-generated`	HTML id attribute (auto-generated if not provided)
`auto_focus`	`Boolean`	`false`	Auto-focus on component mount
`required`	`Boolean`	`false`	Mark field as required
`standalone`	`Boolean`	`true`	Render without Form::Item wrapper
`errors`	`Array`	`[]`	Validation error messages

Radio::Group Props

Props for radio button groups

Prop	Type	Default	Description
`name`	`String`	`auto-generated`	Radio group name (auto-generated if not provided)
`value`	`String`	`nil`	Currently selected value
`options`	`Array`	`[]`	Radio options (strings or hashes with label, value, disabled keys)
`label`	`String`	`nil`	Form field label text
`caption`	`String`	`nil`	Helper text displayed below the group
`variant`	`Symbol`	`:default`	Display variant (default renders as radio circles, button/solid as button group)
`direction`	`Symbol`	`:horizontal`	Layout direction for radio options
`size`	`Symbol`	`:middle`	Size for all radio buttons in group
`disabled`	`Boolean`	`false`	Disable all radio buttons in the group
`standalone`	`Boolean`	`true`	Render without Form::Item wrapper
`required`	`Boolean`	`false`	Mark field as required
`errors`	`Array`	`[]`	Validation error messages

HTML Options

Prop	Type	Default	Description
`**html_options`	`Keyword args`	`{}`	Additional HTML attributes merged into the wrapper element

JavaScript API

Access via element.hakumiComponent.api

Prop	Type	Default	Description
`setChecked(checked)`	`Method`	`-`	Set the checked state and sync with other radios in the group
`isChecked()`	`Method`	`-`	Get the current checked state