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
<div>
<h1 class="heading-20 mb-6">Using name + value: </h1>
<turbo-frame id="some_unique_id">
  <form action="#" accept-charset="UTF-8" method="get">
    <input type="hidden" name="name" id="name" value="text" /><input type="hidden" name="value" id="value" /><input type="hidden" name="placeholder" id="placeholder" value="Digite aqui" /><input type="hidden" name="readonly" id="readonly" value="false" /><input type="hidden" name="help" id="help" /><input type="hidden" name="error" id="error" /><input type="hidden" name="maxlength" id="maxlength" /><input type="hidden" name="minlength" id="minlength" /><input type="hidden" name="autocomplete_type" id="autocomplete_type" /><input type="hidden" name="mode" id="mode" value="inline" />
    <div class="w-64">
      <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="text" 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>
  </form>
</turbo-frame>  
<h1 class="heading-20 my-6">Using model + attribute </h1>
<turbo-frame id="some_other_id">
  <form action="#" accept-charset="UTF-8" method="get">
    <input type="hidden" name="name" id="name" value="text" /><input type="hidden" name="value" id="value" /><input type="hidden" name="placeholder" id="placeholder" value="Digite aqui" /><input type="hidden" name="readonly" id="readonly" value="false" /><input type="hidden" name="help" id="help" /><input type="hidden" name="error" id="error" /><input type="hidden" name="maxlength" id="maxlength" /><input type="hidden" name="minlength" id="minlength" /><input type="hidden" name="autocomplete_type" id="autocomplete_type" /><input type="hidden" name="mode" id="mode" value="inline" />
    <div class="w-64">
      <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="Mew"
  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="pokemon[name]" type="text" value="Mew" 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>
  </form>
</turbo-frame></div>

Inputs::Text

The Inputs::Text component allows users to enter single-line text. It’s used for collecting short, free-form text data, such as names, or titles.

Used Components Components where is Used
- FormEntry

Usage rules

✅ Do

  • Use for collecting short textual information
  • Provide clear placeholder text or labels
  • Validate input in real-time where applicable. Ex: character limits

❌ Don't

  • Don’t use for multi-line input
  • Don’t use this for numeric or date inputs
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
<%
  sleep_enabled = preview_params.delete(:sleep)
  if sleep_enabled && (params[preview_params[:name]].present? || params[:pokemon].present?)
    sleep(2)
  end
%>
<div>
  <h1 class="heading-20 mb-6">Using name + value: </h1>
  <%= turbo_frame_tag "some_unique_id" do %>
    <%= form_with url: "#", method: :get do %>
      <%= lookbook_fields(preview_params) %>
      <div class="w-64">
        <%= render LooposUi::Inputs::Text.new(
          **preview_params,
          value: params[preview_params[:name]].presence || preview_params[:value]
        ) %>
      </div>
    <% end %>
  <% end %>
  <h1 class="heading-20 my-6">Using model + attribute </h1>
  <%= turbo_frame_tag "some_other_id" do %>
    <%= form_with url: "#", method: :get do %>
      <%= lookbook_fields(preview_params) %>
      <div class="w-64">
        <%= render LooposUi::Inputs::Text.new(
          **preview_params,
          model: Pokemon.new(name: params.dig(:pokemon, :name).presence || "Mew"),
          attribute: :name
        ) %>
      </div>
    <% end %>
  <% end %>
</div>

Base options

Param Description Input

Input name

Input value

Input placeholder

Input readonly

Input help text

Input error text

Input max length

Input min length

HTML autocomplete token (e.g. email, tel, off)

Sleep for 2 seconds, for testing purposes

—

Description

Inputs::Text component is used to render a text input field.

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 Value of the input field.
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.
mode :inline Mode of the text input. Can be :inline, :autosubmit, or :form.
appearance nil Visual modifier. Defaults to mode when omitted.
form nil HTML form attribute used to associate the input and submit button with an external form.
readonly false Renders the value as readonly text.
custom_readonly false In readonly mode, renders the 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.

Text field specific arguments

Property Default Description
maxlength nil Maximum length of the input field.
minlength nil Minimum length of the input field.
autocomplete_type nil Optional HTML autocomplete token. When not provided, the component keeps its previous behavior.

Protocol mapping note

For protocol forms, map Core payload key autocomplete_type into Inputs::Text argument autocomplete_type using valid HTML tokens (e.g. Core no-autocomplete → off). Allowed Core values are defined in autocomplete_options.

Slots

No slots available for this component.

Usage

You have two usages for this component:

  • With a model and an attribute
  • With name and value

Example using a model and an attribute:

<%= render LooposUi::Inputs::Text.new(
    model: Pokemon.new(name: "Mew"),
    attribute: :name,
    placeholder: "Digite aqui",
    maxlength: 3,
    minlength: 20) %>

This will generate the following HTML:

<div data-controller="input" class="lui-inner-input relative flex gap-2" data-input-original-input-value="Mew">
  <div class="w-full flex flex-col">
    <span class="lui-input ">
      <span class="lui-input__addon">
      </span>
      <!-- IMPORTANT PART -->
      <input name="pokemon[name]" type="text" value="Mew" placeholder="Digite aqui" class="lui-input__input" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" maxlength="3" minlength="20">
      <!-- IMPORTANT PART -->
      <span class="lui-input__addon">
      </span>
      <span class="lui-input__spinner">
        <i class="fa-regular fa-spinner"></i>
      </span>
    </span>
  </div>
  <span class="opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
    <button id="8670528836" class="lui-button lui-button--neutral--secondary lui-button--size-tiny" data-input-target="cancel" data-action="click->input#handleClose" type="button">
      <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark"></i>
    </button>
    <button id="9451751915" class="lui-button lui-button--success--secondary lui-button--size-tiny" type="submit" data-input-target="submit">
      <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check"></i>
    </button>
  </span>
</div>

Example using name and value:

<%= render LooposUi::Inputs::Text.new(
    name: "some_name",
    value: "default value",
    autocomplete_type: "email",
) %>

The relevant part of the generated HTML is:

<input name="some_name" type="text" value="default value" autocomplete="email" class="lui-input__input" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange">

⚠️ 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:

<%= turbo_frame_tag "some_unique_id" do %>
  <%= form_with url: "some_url", method: :post do %>
    <%= render LooposUi::Inputs::Text.new(
      name: "text",
      value: nil,
      placeholder: "Digite aqui",
      maxlength: nil,
      minlength: nil,
      error: nil, **options
    ) %>
  <% end %>
<% end %>

Depending on how the backend is implemented, you may not need a turbo frame tag, if you respond with a turbo stream, you can replace the form directly.