LoopOS UI v1.1.59.0-release.taskforce.dynamic.form.in.UI.rc2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form id="combobox_autosubmit_form" data-turbo-frame="combobox-autosubmit-frame" action="#" accept-charset="UTF-8" method="get">
  <div class="lui-combobox w-full flex flex-col gap-1 lui-combobox--autosubmit">
    <label class="text-sm font-medium text-content" for="looposui-inputs-combobox_combobox_framework_5793709857">
      Framework
    </label>      
    <p id="looposui-inputs-combobox_combobox_framework_5793709857_description" class="copy-12 text-foreground">
      Changing the value submits this GET form (Turbo replaces the frame below).
    </p>
    <select name="combobox_framework" id="looposui-inputs-combobox_combobox_framework_5793709857" class="lui-combobox__select w-full" form="combobox_autosubmit_form" style="visibility: hidden;" data-controller="combobox" data-combobox-submit-on-change-value="true" data-combobox-dropdown-input-value="true" data-combobox-dropdown-input-placeholder-value="Search..." data-combobox-clear-button-value="false" data-combobox-open-on-mouse-down-value="true" data-combobox-lock-scroll-value="false" data-combobox-disable-typing-value="false" data-combobox-allow-new-value="false" data-combobox-scroll-buttons-value="false" data-combobox-update-field-value="false" data-combobox-update-field-source-value="name" data-combobox-per-page-value="60" data-combobox-virtual-scroll-value="false" data-combobox-optgroup-columns-value="false" data-combobox-response-data-field-value="data" data-combobox-search-param-value="query" data-combobox-show-count-value="false" data-combobox-count-text-value="selected" data-combobox-tags-position-value="inline" data-combobox-enable-flag-toggle-value="false" data-combobox-value-field-value="value" data-combobox-label-field-value="label" aria-describedby="looposui-inputs-combobox_combobox_framework_5793709857_description"><option value="">Select framework…</option>
      <option selected="selected" value="rails">Ruby on Rails</option>
      <option value="laravel">Laravel</option>
      <option value="django">Django</option>
      <option value="express">Express.js</option></select>
  </div>
</form>
<div class="mt-6">
  <p class="text-sm font-medium text-content mb-2">Current submitted value</p>
  <turbo-frame id="combobox-autosubmit-frame">
    <div class="rounded-md border border-tertiary bg-secondary p-3 text-copy-12-400">
      <div>
        <span class="text-foreground">params[:combobox_framework]:</span>
        <code class="ml-1 text-content">—</code>
      </div>
      <div class="mt-1 text-content-secondary">
        2026-07-04 17:18:35 UTC
      </div>
    </div>
  </turbo-frame></div>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<%
  if params.key?(:combobox_framework) && params[:simulate_slow_response].present?
    sleep 2
  end
%>
<% form_id = "combobox_autosubmit_form" %>
<%= form_with url: "#", method: :get, id: form_id, data: { turbo_frame: "combobox-autosubmit-frame" } do %>
  <%= lookbook_fields(params.slice(:simulate_slow_response)) %>
  <%= render LooposUi::Inputs::Combobox.new(
        name: "combobox_framework",
        label: "Framework",
        description: "Changing the value submits this GET form (Turbo replaces the frame below).",
        include_blank: "Select framework…",
        mode: :autosubmit,
        form: form_id,
        options: [
          { value: "rails", text: "Ruby on Rails" },
          { value: "laravel", text: "Laravel" },
          { value: "django", text: "Django" },
          { value: "express", text: "Express.js" },
        ],
        value: params[:combobox_framework].presence || "rails",
      ) %>
<% end %>
<div class="mt-6">
  <p class="text-sm font-medium text-content mb-2">Current submitted value</p>
  <%= turbo_frame_tag "combobox-autosubmit-frame" do %>
    <div class="rounded-md border border-tertiary bg-secondary p-3 text-copy-12-400">
      <div>
        <span class="text-foreground">params[:combobox_framework]:</span>
        <code class="ml-1 text-content"><%= params[:combobox_framework].presence || "—" %></code>
      </div>
      <div class="mt-1 text-content-secondary">
        <%= Time.current %>
      </div>
    </div>
  <% end %>
</div>

Submits the surrounding form on change (mode: :autosubmit); shows submitted param in a turbo frame.

Param Description Input

Simulate slow response, 2 seconds delay

Inputs::Combobox

Description

LooposUi::Inputs::Combobox renders a searchable select powered by Tom Select. It supports single and multiple selection, remote loading, virtual scrolling, custom option rendering, inline actions, and form/autosubmit modes.

Base Arguments

Property Default Description
model nil ActiveRecord model instance. When paired with attribute, the component derives name, selected value(s), and model errors.
attribute nil Model attribute name.
name required unless model + attribute Select field name. For multiple: true, [] is appended automatically when missing.
value nil Selected value for single selects. Can also be an array and will be normalized into selected when multiple: true.
selected nil Explicit selected value(s). Prefer this for multiple selects.
placeholder nil Placeholder from the base input API; Tom Select uses dropdown_placeholder for search input placeholder.
error nil Error message shown below the combobox.
help nil Help text shown below the combobox when no error is present.
mode :inline Behaviour mode: :inline, :form, or :autosubmit.
appearance nil Visual modifier. Defaults to mode.
form nil HTML form attribute for the underlying select.
readonly false Renders selected text instead of the interactive combobox.
open_actions false Base input option; inline combobox side actions are controlled by mode and selection type.
extra_input_attributes {} Extra attributes merged into the native <select>.

Combobox Arguments

Property Default Description
options [] Local options. Each option has value, text, optional disabled, and optional data.
include_blank false Adds a blank option. When a string is passed, it is used as the blank label.
multiple false Enables multiple selection.
disabled false Disables the native select and Tom Select interaction.
required false Adds native required validation. Also disables the clear button.
label nil Optional label text rendered by the component template.
description nil Optional descriptive text used for accessibility (aria-describedby).
html_id nil Explicit id for the underlying select. Defaults to unique_id.
url nil Remote endpoint used by the Stimulus controller for searching/loading options.
value_field "value" Field name for option values in remote responses.
label_field "label" Field name for option labels in remote responses.
search_param "query" Query parameter name sent to the remote endpoint.
per_page 60 Number of options requested per page in remote/virtual-scroll mode.
virtual_scroll false Enables paginated remote loading.
response_data_field "data" Key used to read option rows from the remote response.
optgroup_columns false Enables optgroup column rendering in the dropdown.
searchable true Shows the dropdown search input.
clear_button true Allows clearing the selected value when not required and not in form/autosubmit mode.
open_on_mouse_down true Opens the dropdown on mouse down.
lock_scroll false Locks page scroll while the dropdown is open.
allow_create false Allows creating new options from typed text.
submit_on_change false Submits the form on change. mode: :autosubmit enables this automatically.
disable_typing false Prevents typing/search input while keeping the dropdown usable.
scroll_buttons false Enables scroll buttons in long dropdowns.
update_field false Updates another field when the selected option changes.
update_field_target nil Target selector/id for update_field.
update_field_source "name" Option data field used when updating another field.
show_count false Shows selected count for multiple selects.
count_text "selected" Text suffix for the selected count.
count_text_singular nil Singular text suffix for one selected item.
tags_position "inline" Controls where selected tags are rendered.
enable_flag_toggle false Enables flag toggle behavior in the controller.
image_field nil Remote field used for option images.
subtitle_field nil Remote field used for option subtitles.
meta_fields nil Additional remote fields rendered as metadata.
badge_field nil Remote field used for option badges.
render_template nil Custom render template name used by the controller.
dropdown_placeholder "Search..." Placeholder for the dropdown search input.
no_more_results_text nil Text shown when virtual scroll has no more results.
no_search_results_text nil Text shown when search returns no results.
loading_text nil Text shown while remote options load.
create_text nil Text shown for create-new-option UI.
extra_data {} Extra Stimulus data values merged into the combobox controller data.

Option Schema

Property Default Description
value required Submitted option value.
text required Display label.
disabled false Disables the option.
data {} Extra data attributes rendered on the <option>.

Usage

<%= render LooposUi::Inputs::Combobox.new(
  name: "assignee_id",
  options: [
    { value: "1", text: "Ana" },
    { value: "2", text: "Bruno" },
  ],
  include_blank: "Select assignee",
  searchable: true,
) %>

Remote multiple combobox:

<%= render LooposUi::Inputs::Combobox.new(
  name: "tag_ids",
  multiple: true,
  selected: ["1", "2"],
  url: tags_path,
  value_field: "id",
  label_field: "name",
  virtual_scroll: true,
) %>