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
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<div class="flex flex-col gap-10 p-6">
  <div>
    <h2 class="heading-20 mb-4">Default</h2>
    <div style="width: 430px;">
      <form id="grid_form_empty" action="#" accept-charset="UTF-8" method="get">
        <p class="copy-12 text-gray-500 mb-2">Label</p>
        <div id="looposui-inputs-select_option_empty_5793709857" class="grow" data-controller="input-select" data-input-select-mode-value="form" data-input-select-variant-value="grid">
          <div class="lui-input-select lui-input-select--grid lui-inputs__select lui-input-select--grid" role="listbox">
            <div class="lui-input-select__grid-options">
              <span class="lui-button__tooltip-wrapper inline-flex w-full">
                <button class="lui-button lui-button--size-small lui-button--neutral--secondary w-full w-full relative" data-controller="lui--button" data-input-select-target="option" data-action="click->input-select#selectGridOption" data-text="Option 1" data-value="1" type="button" role="option">
                  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                    Option 1
                  </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-rounded" style="--lui-micon-size: 14px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-full">
                <button class="lui-button lui-button--size-small lui-button--neutral--secondary w-full w-full relative" data-controller="lui--button" data-input-select-target="option" data-action="click->input-select#selectGridOption" data-text="Option 2" data-value="2" type="button" role="option">
                  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                    Option 2
                  </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-rounded" style="--lui-micon-size: 14px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-full">
                <button class="lui-button lui-button--size-small lui-button--neutral--secondary w-full w-full relative" data-controller="lui--button" data-input-select-target="option" data-action="click->input-select#selectGridOption" data-text="Option 3" data-value="3" type="button" role="option">
                  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                    Option 3
                  </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-rounded" style="--lui-micon-size: 14px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
            </div>
          </div>
          <input type="hidden" name="option_empty" id="option_empty" data-input-select-target="hiddenInput" />
        </div>
      </form>
    </div>
  </div>
  <div>
    <h2 class="heading-20 mb-4">Pre-selected</h2>
    <div style="width: 430px;">
      <form id="grid_form_preselected" action="#" accept-charset="UTF-8" method="get">
        <p class="copy-12 text-gray-500 mb-2">Label</p>
        <div id="looposui-inputs-select_option_preselected_9912568611" class="grow" data-controller="input-select" data-input-select-mode-value="form" data-input-select-variant-value="grid">
          <div class="lui-input-select lui-input-select--grid lui-inputs__select lui-input-select--grid" role="listbox">
            <div class="lui-input-select__grid-options">
              <span class="lui-button__tooltip-wrapper inline-flex w-full">
                <button class="lui-button lui-button--size-small lui-button--neutral--secondary w-full w-full relative" data-controller="lui--button" data-input-select-target="option" data-action="click->input-select#selectGridOption" data-text="Option 1" data-value="1" type="button" role="option" aria-selected="true">
                  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                    Option 1
                  </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-rounded" style="--lui-micon-size: 14px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-full">
                <button class="lui-button lui-button--size-small lui-button--neutral--secondary w-full w-full relative" data-controller="lui--button" data-input-select-target="option" data-action="click->input-select#selectGridOption" data-text="Option 2" data-value="2" type="button" role="option" aria-selected="false">
                  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                    Option 2
                  </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-rounded" style="--lui-micon-size: 14px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-full">
                <button class="lui-button lui-button--size-small lui-button--neutral--secondary w-full w-full relative" data-controller="lui--button" data-input-select-target="option" data-action="click->input-select#selectGridOption" data-text="Option 3" data-value="3" type="button" role="option" aria-selected="false">
                  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                    Option 3
                  </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-rounded" style="--lui-micon-size: 14px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
            </div>
          </div>
          <input type="hidden" name="option_preselected" id="option_preselected" value="1" data-input-select-target="hiddenInput" />
        </div>
        <div class="mt-6 flex justify-end">
          <span class="lui-button__tooltip-wrapper inline-flex w-fit">
            <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
              <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-rounded" style="--lui-micon-size: 16px;">
                  progress_activity
                </i>
              </div>
            </button></span>
        </div>
      </form>
    </div>
  </div>
</div>

Inputs::Select

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
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
<%
  options = [
    { value: "1", text: "Option 1" },
    { value: "2", text: "Option 2" },
    { value: "3", text: "Option 3" },
  ]
%>
<div class="flex flex-col gap-10 p-6">
  <div>
    <h2 class="heading-20 mb-4">Default</h2>
    <div style="width: 430px;">
      <%= form_with url: "#", method: :get, id: "grid_form_empty" do %>
        <p class="copy-12 text-gray-500 mb-2">Label</p>
        <%= render LooposUi::Inputs::Select.new(
          name: "option_empty",
          options: options,
          variant: :grid,
          mode: :form,
          help: params[:help].presence,
          error: params[:error].presence,
        ) %>
      <% end %>
    </div>
  </div>
  <div>
    <h2 class="heading-20 mb-4">Pre-selected</h2>
    <div style="width: 430px;">
      <%= form_with url: "#", method: :get, id: "grid_form_preselected" do %>
        <p class="copy-12 text-gray-500 mb-2">Label</p>
        <%= render LooposUi::Inputs::Select.new(
          name: "option_preselected",
          options: options,
          value: "1",
          variant: :grid,
          mode: :form,
          help: params[:help].presence,
          error: params[:error].presence,
        ) %>
        <div class="mt-6 flex justify-end">
          <%= render LooposUi::Button.new(text: "Submit", kind: :neutral) %>
        </div>
      <% end %>
    </div>
  </div>
</div>

No notes provided.

Param Description Input

Helper text below the input

Validation error message

Inputs::Select

Description

Inputs::Select component is used to render select input fields.

Arguments

Most input components have the following base arguments:

Base Arguments

Property Default Description
model nil ActiveRecord instance.
attribute nil Attribute name of the model.
name nil Name of the input field.
value nil Pre-selected option. Must have the same value as an exisiting option.
placeholder nil Placeholder text.
error nil Error message. If model is present, the errors will be extracted for the current attribute
help nil Help message.
appearance nil Visual modifier. Defaults to mode when omitted.
readonly false Renders the selected option text as readonly text.
custom_readonly false In readonly mode, renders provided content instead of the plain value.
open_actions false Open field in edit mode by default.
extra_input_attributes {} Attributes to be added to the input element.

Select Specific arguments

Property Default Description
options nil Options for the select field.
mode :inline Behavioural mode. Can be :inline, :autosubmit or :form. Controls save/cancel actions and form submission.
variant :list Visual variant. :list renders the current dropdown. :grid renders all options as visible buttons.
include_blank false Adds a blank option. When a string is passed, it is used as the blank label. In grid mode, blank options are omitted.
clearable true Shows the clear button in list mode.
portal_target nil CSS selector for the element where the dropdown should be portaled. Falls back to modal containers or document.body.
form nil Form id to be submitted when the mode is :autosubmit. Will try to use find closest parent if omitted.

Options schema

Property Description
value Value of the option.
text Label of the option.
icon Icon of the option. Can use the shorthand version fa-regular fa-* will be prepended if missing.
tooltip Optional tooltip text shown next to the option label.

Modes

mode controls the behavioural integration of the Select within a form:

  • :inline - On change, cancel/save actions appear. The value is persisted when the user confirms.
  • :autosubmit - On change, the form is submitted immediately. Cancel/save actions are hidden.
  • :form - The value is stored in a hidden input and submitted when the surrounding form is submitted. The developer is responsible for providing the submit button and form.

All modes work with both variant: :list and variant: :grid.

Variants

variant controls the visual presentation of the Select:

  • :list (default) — The current dropdown behaviour: a readonly text input triggers a Tippy popup with the list of options.
  • :grid — All options are always visible as buttons (LooposUi::Button). The underlying hidden input and form submission contract are identical to the list variant.

Slots

No slots available for this component.

⚠️ Important

It's the responsibility of the developer to handle the generation of the form, and handling any turbo frame updates or form submissions. The recommendation is to use the form_with helper from Rails, along with a turbo_frame_tag, so only the inline component is updated.