LoopOS UI v1.1.29.1

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