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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<div class="flex flex-col gap-4">
  <div class="lui-form_entry lui-form_entry--vertical">
    <div class="lui-form_entry__row">
      <div class="lui-form_entry__input">
        <div class="lui-text lui-text--inline relative">
          <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value=""
    data-input-mode-value="inline"
    data-input-form-value="">
            <div class="w-full flex flex-col">
              <div class="lui-input-chrome relative w-full">
                <span class="lui-input ">
                  <input name="test" type="text" placeholder="Digite aqui" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange">
                  <span class="lui-input__spinner">
                    <i class="fa-regular fa-spinner"></i>
                  </span>
                </span>      </div>
            </div>
            <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <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-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <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-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
            </span>
          </div>
        </div>
      </div>
      <div class="lui-form_entry__label-wrapper pl-2" style="">
        <span class="lui-form_entry__label">Form label</span>
        <span class="lui-form_entry__required"></span>
        <div class="lui-form_entry__icon">
          <span class="lui-icon_tooltip">
            <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
              <div class="lui-tooltip__title">
                This is a tooltip
              </div>
            </div>
            <div class="lui-icon h-[14px] w-[14px]">
              <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 14px; color: --text-content;"></i>
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="lui-form_entry lui-form_entry--vertical">
    <div class="lui-form_entry__row">
      <div class="lui-form_entry__input">
        <div class="lui-text lui-text--inline relative">
          <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value=""
    data-input-mode-value="inline"
    data-input-form-value="">
            <div class="w-full flex flex-col">
              <div class="lui-input-chrome relative w-full">
                <span class="lui-input ">
                  <input name="test" type="text" placeholder="Digite aqui" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange">
                  <span class="lui-input__spinner">
                    <i class="fa-regular fa-spinner"></i>
                  </span>
                </span>      </div>
            </div>
            <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <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-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <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-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
            </span>
          </div>
        </div>
      </div>
      <div class="lui-form_entry__label-wrapper pl-2" style="">
        <span class="lui-form_entry__label">Form label</span>
        <span class="lui-form_entry__required"></span>
        <div class="lui-form_entry__icon">
          <span class="lui-icon_tooltip">
            <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
              <div class="lui-tooltip__title">
                This is a tooltip
              </div>
            </div>
            <div class="lui-icon h-[14px] w-[14px]">
              <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 14px; color: --text-content;"></i>
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

FormEntry

The Form Entry component combines an input field with a visible label to create a clear, accessible unit for data collection

Used Components Components where is Used
Label

Usage rules

✅ Do

  • Use for any input field requiring context
  • Ensure labels are positioned consistently
  • Include optional/required indicators and help messages wen necessary

❌ Don't

  • Don’t make labels overly verbose or unclear
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex flex-col gap-4">
  <%= render LooposUi::FormEntry.new(**preview_params) do  |entry| %>
    <%= entry.with_input do %>
      <%= render LooposUi::Inputs::Text.new(
        name: "test",
        placeholder: "Digite aqui",
      ) %>
    <% end %>
  <% end %>
  <%= render LooposUi::FormEntry.new(**preview_params) do  |entry| %>
    <%= entry.with_input do %>
      <%= render LooposUi::Inputs::Text.new(
        name: "test",
        placeholder: "Digite aqui",
      ) %>
    <% end %>
  <% end %>
</div>

No notes provided.

Param Description Input

—

—

—

—

—

FormEntry

The FormEntry component encapsulates form fields, providing a consistent structure for labels, inputs, and auxiliary elements such as required field indicators and tooltips.

Properties

Property Type Default Description
label String - Text label for the field. When blank (empty or whitespace only), the label wrapper, required asterisk, and tooltip icon are not rendered
required Boolean false Defines if the field is required (asterisk next to the label). Ignored when label is blank
orientation String "vertical" Layout orientation ("vertical" or "horizontal")
tooltip String nil Informative text displayed in the help icon. Not rendered when label is blank
tooltip_icon String "fa-regular fa-circle-info" Icon class used for the tooltip trigger
tooltiplinkhref String nil Optional link URL rendered in the tooltip
tooltiplinkname String nil Optional link label. Defaults to tooltip_link_href when omitted
label_width Integer nil Fixed width for the label (in pixels)
error String nil Error message associated with the entry. Used by entry styles and callers that render field errors

Slots

  • input: slot for the form input element (should be a LooposUi input component).

Label-less entries

Use a blank label when the input provides its own label (e.g. Inputs::Checkbox). FormEntry still applies layout/spacing via lui-form_entry__input without reserving an empty label column.

orientation accepts :vertical, :horizontal, and :horizontal_reverse. :horizontal_reverse is useful when the input should appear before the label, such as boolean protocol fields.

<%= render LooposUi::FormEntry.new(
  label: "",
  orientation: "horizontal",
  label_width: 150,
) do |entry| %>
  <%= entry.with_input do %>
    <%= render LooposUi::Inputs::Checkbox.new(
      name: "protocol_answers[0][value]",
      submit_via_hidden: true,
      submitted_value: "false",
      label: "Accept terms",
      required: true,
    ) %>
  <% end %>
<% end %>

Examples

<%= render LooposUi::FormEntry.new(
  label: "Nome completo",
  required: true,
  tooltip: "Digite seu nome completo conforme documento oficial",
  orientation: "horizontal",
  label_width: 150
) do |entry| %>
  <%= entry.with_input do %>
    <%= render LooposUi::Inputs::Text.new(
      name: "full_name",
      placeholder: "Digite seu nome completo"
    ) %>
  <% end %>
<% end %>
<%= render LooposUi::FormEntry.new(
  label: "Endereço",
  orientation: "vertical"
) do |entry| %>
  <%= entry.with_input do %>
    <%= render LooposUi::Inputs::Text.new(
      name: "address",
      placeholder: "Digite seu endereço"
    ) %>
  <% end %>
<% end %>