LoopOS UI v1.1.26.2

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
<div class="flex flex-col gap-4">
  <div class="lui-form_entry lui-form_entry--vertical">
    <div class="lui-form_entry__input">
      <div class="lui-text 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">
            <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>
          <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
            <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
              <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--success--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading" type="submit" disabled="disabled">
              <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i>
            </button>
          </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-[12px] w-[12px]">
            <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
          </div>
        </span>
      </div>
    </div>
  </div>
  <div class="lui-form_entry lui-form_entry--vertical">
    <div class="lui-form_entry__input">
      <div class="lui-text 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">
            <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>
          <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
            <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
              <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--success--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading" type="submit" disabled="disabled">
              <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i>
            </button>
          </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-[12px] w-[12px]">
            <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
          </div>
        </span>
      </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
required Boolean false Defines if the field is required
orientation String "vertical" Layout orientation ("vertical" or "horizontal")
tooltip String nil Informative text displayed in the help icon
label_width Integer nil Fixed width for the label (in pixels)

Slots

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

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 %>