LoopOS UI v1.1.48.1

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-text-v2-primary" for="looposui-inputs-combobox_combobox_framework_9552548115">
      Framework
    </label>      
    <p id="looposui-inputs-combobox_combobox_framework_9552548115_description" class="text-copy-12-400 text-text-v2-secondary">
      Changing the value submits this GET form (Turbo replaces the frame below).
    </p>
    <select name="combobox_framework" id="looposui-inputs-combobox_combobox_framework_9552548115" 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_9552548115_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-text-v2-primary mb-2">Current submitted value</p>
  <turbo-frame id="combobox-autosubmit-frame">
    <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400">
      <div>
        <span class="text-text-v2-secondary">params[:combobox_framework]:</span>
        <code class="ml-1 text-text-v2-primary">—</code>
      </div>
      <div class="mt-1 text-text-v2-contrast">
        2026-05-05 20:54:12 UTC
      </div>
    </div>
  </turbo-frame></div>

No Usage documentation to display.

Create a markdown file in /project/test/components/loopos_ui/usage_documentation/combobox.md.

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-text-v2-primary mb-2">Current submitted value</p>
  <%= turbo_frame_tag "combobox-autosubmit-frame" do %>
    <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400">
      <div>
        <span class="text-text-v2-secondary">params[:combobox_framework]:</span>
        <code class="ml-1 text-text-v2-primary"><%= params[:combobox_framework].presence || "—" %></code>
      </div>
      <div class="mt-1 text-text-v2-contrast">
        <%= 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

No documentation to display.

Create a markdown file in combobox.