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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="w-full max-w-xs flex flex-col gap-4"> <form class="contents" action="#" accept-charset="UTF-8" method="get"> <div class="lui-combobox w-full flex flex-col gap-1 lui-combobox--inline"> <label class="text-sm font-medium text-text-v2-primary" for="looposui-inputs-combobox_combobox_basic_framework_5793709857"> Framework <span class="text-semantic-error-default" aria-hidden="true">*</span> </label> <p id="looposui-inputs-combobox_combobox_basic_framework_5793709857_description" class="text-copy-12-400 text-text-v2-secondary"> Choose a web framework (default mode: inline — no submit on change). Use Submit to refresh params in the demo. </p> <div class="lui-inner-input lui-combobox__inline-row relative flex w-full gap-2 items-center" data-controller="input" data-input-open-actions-value="false" data-input-original-input-value="rails" data-input-mode-value="inline"> <div class="min-w-0 w-full"> <select name="combobox_basic_framework" id="looposui-inputs-combobox_combobox_basic_framework_5793709857" class="lui-combobox__select w-full" required="required" style="visibility: hidden;" data-controller="combobox" data-combobox-submit-on-change-value="false" 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" data-combobox-inline-actions-value="true" data-action="change->input#onChange" data-input-target="input" aria-describedby="looposui-inputs-combobox_combobox_basic_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> <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit shrink-0" data-input-target="actions"> <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i></div> </div> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading lui--button#startLoading" type="submit" disabled="disabled"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i></div> </div> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;"> progress_activity </i> </div> </button> </span> </div> </div> </form></div><div class="mt-6 w-full max-w-xs"> <p class="text-sm font-medium text-text-v2-primary mb-2">Current submitted value</p> <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400"> <span class="text-text-v2-secondary">params[:combobox_basic_framework]:</span> <code class="ml-1 text-text-v2-primary break-all">—</code> </div></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
<div class="w-full max-w-xs flex flex-col gap-4"> <%= form_with url: "#", method: :get, class: "contents" do %> <%= render LooposUi::Inputs::Combobox.new( name: "combobox_basic_framework", label: "Framework", description: "Choose a web framework (default mode: inline — no submit on change). Use Submit to refresh params in the demo.", mode: :inline, include_blank: "Select framework…", required: true, options: [ { value: "rails", text: "Ruby on Rails" }, { value: "laravel", text: "Laravel" }, { value: "django", text: "Django" }, { value: "express", text: "Express.js" }, ], value: params[:combobox_basic_framework].presence || "rails", ) %> <% end %></div><div class="mt-6 w-full max-w-xs"> <p class="text-sm font-medium text-text-v2-primary mb-2">Current submitted value</p> <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400"> <span class="text-text-v2-secondary">params[:combobox_basic_framework]:</span> <code class="ml-1 text-text-v2-primary break-all"><%= params[:combobox_basic_framework].presence || "—" %></code> </div></div>Basic single-select combobox (Tom Select + Stimulus), matching Rails Blocks basics.
No params configured.
No documentation to display.
Create a markdown file in combobox.