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
<div class="w-full max-w-md 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_languages___5793709857"> Languages </label> <select name="languages[]" id="looposui-inputs-combobox_languages___5793709857" class="lui-combobox__select w-full" multiple="multiple" 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="true" 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="true" 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="below" data-combobox-enable-flag-toggle-value="false" data-combobox-value-field-value="value" data-combobox-label-field-value="label"><option selected="selected" value="ruby">Ruby</option> <option selected="selected" value="javascript">JavaScript</option> <option value="python">Python</option></select> </div> <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" type="submit"> <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text"> Submit </span> <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: 16px;"> progress_activity </i> </div> </button> </form></div><div class="mt-6 w-full max-w-md"> <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[:languages]:</span> <code class="ml-1 text-text-v2-primary break-all">ruby, javascript</code> </div></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
<% submitted = Array.wrap(params[:languages]).compact_blank.map(&:to_s) selected = submitted.presence || %w[ruby javascript] display_submitted = submitted.presence || selected%><div class="w-full max-w-md flex flex-col gap-4"> <%= form_with url: "#", method: :get, class: "contents" do %> <%= render LooposUi::Inputs::Combobox.new( name: "languages", label: "Languages", multiple: true, allow_create: true, tags_position: "below", include_blank: false, selected: selected, options: [ { value: "ruby", text: "Ruby" }, { value: "javascript", text: "JavaScript" }, { value: "python", text: "Python" }, ], ) %> <%= render LooposUi::Button.new(text: "Submit", kind: :neutral, tag_options: { type: :submit }) %> <% end %></div><div class="mt-6 w-full max-w-md"> <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[:languages]:</span> <code class="ml-1 text-text-v2-primary break-all"><%= display_submitted.join(", ") %></code> </div></div>Multi-select with preselected values.
No params configured.
No documentation to display.