Cascader - Hakumi Components

Basic

Cascade selection box for selecting province/city/district.

Please select

Code

<%
  options = [
    {
      value: 'spain',
      label: 'Spain',
      children: [
        {
          value: 'madrid',
          label: 'Madrid',
          children: [
            {
              value: 'salamanca',
              label: 'Salamanca',
            },
          ],
        },
      ],
    },
    {
      value: 'france',
      label: 'France',
      children: [
        {
          value: 'paris',
          label: 'Paris',
          children: [
            {
              value: 'montmartre',
              label: 'Montmartre',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render HakumiComponents::Cascader::Component.new(options: options, placeholder: "Please select") %>

Default Value

Specifies default value by an array.

Please select

Code

<%
  options = [
    {
      value: 'spain',
      label: 'Spain',
      children: [
        {
          value: 'madrid',
          label: 'Madrid',
          children: [
            {
              value: 'salamanca',
              label: 'Salamanca',
            },
          ],
        },
      ],
    },
    {
      value: 'france',
      label: 'France',
      children: [
        {
          value: 'paris',
          label: 'Paris',
          children: [
            {
              value: 'montmartre',
              label: 'Montmartre',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render HakumiComponents::Cascader::Component.new(
  options: options,
  value: ['spain', 'madrid', 'salamanca'],
  placeholder: "Please select"
) %>

Hover trigger

Hover to expand sub menu, click to select option.

Hover to select

Code

<%
  options = [
    {
      value: 'portugal',
      label: 'Portugal',
      children: [
        {
          value: 'lisbon',
          label: 'Lisbon',
          children: [
            {
              value: 'alfama',
              label: 'Alfama',
            },
          ],
        },
      ],
    },
    {
      value: 'netherlands',
      label: 'Netherlands',
      children: [
        {
          value: 'amsterdam',
          label: 'Amsterdam',
          children: [
            {
              value: 'jordaan',
              label: 'Jordaan',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render HakumiComponents::Cascader::Component.new(
  options: options,
  expand_trigger: :hover,
  placeholder: "Hover to select"
) %>

Change on select

Allows the selection of only parent options.

Select any level

Code

<%
  options = [
    {
      value: 'italy',
      label: 'Italy',
      children: [
        {
          value: 'tuscany',
          label: 'Tuscany',
          children: [
            {
              value: 'florence',
              label: 'Florence',
            },
          ],
        },
      ],
    },
    {
      value: 'germany',
      label: 'Germany',
      children: [
        {
          value: 'bavaria',
          label: 'Bavaria',
          children: [
            {
              value: 'munich',
              label: 'Munich',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render HakumiComponents::Cascader::Component.new(
  options: options,
  change_on_select: true,
  placeholder: "Select any level"
) %>

Props

Prop	Type	Default	Description
`name`	`String`	`auto-generated`	Input name attribute (auto-generated if not provided)
`options`	`Array`	`[]`	Hierarchical data source with value, label, and optional children keys
`value`	`Array`	`[]`	Selected value path as array
`placeholder`	`String`	`"Select"`	Input placeholder text
`size`	`Symbol`	`:middle`	Input size
`disabled`	`Boolean`	`false`	Disable the cascader
`allow_clear`	`Boolean`	`true`	Show clear button to reset selection
`show_search`	`Boolean`	`false`	Enable search functionality
`change_on_select`	`Boolean`	`false`	Allow selecting parent options (emit change on intermediate selections)
`expand_trigger`	`Symbol`	`:click`	Trigger type to expand submenus
`display_render`	`Callable`	`nil`	Custom label renderer for selected values

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
`getValue()`	`Method`	`-`	Get the current selected value path array
`setValue(path)`	`Method`	`-`	Set the selected path programmatically
`getLabel()`	`Method`	`-`	Get the current label path joined by separator
`open()`	`Method`	`-`	Open the cascader dropdown
`close()`	`Method`	`-`	Close the cascader dropdown
`clear()`	`Method`	`-`	Clear the selection
`isOpen()`	`Method`	`-`	Check if dropdown is currently open