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
<div><h1 class="text-primary-lg-regular 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" autocomplete="off" /><input type="hidden" name="value" id="value" autocomplete="off" /><input type="hidden" name="placeholder" id="placeholder" value="Digite aqui" autocomplete="off" /><input type="hidden" name="readonly" id="readonly" value="false" autocomplete="off" /><input type="hidden" name="help" id="help" autocomplete="off" /><input type="hidden" name="error" id="error" autocomplete="off" /><input type="hidden" name="maxlength" id="maxlength" autocomplete="off" /><input type="hidden" name="minlength" id="minlength" autocomplete="off" /><input type="hidden" name="mode" id="mode" value="inline" autocomplete="off" /> <div class="w-64"> <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="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> <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> </form></turbo-frame> <h1 class="text-primary-lg-regular 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" autocomplete="off" /><input type="hidden" name="value" id="value" autocomplete="off" /><input type="hidden" name="placeholder" id="placeholder" value="Digite aqui" autocomplete="off" /><input type="hidden" name="readonly" id="readonly" value="false" autocomplete="off" /><input type="hidden" name="help" id="help" autocomplete="off" /><input type="hidden" name="error" id="error" autocomplete="off" /><input type="hidden" name="maxlength" id="maxlength" autocomplete="off" /><input type="hidden" name="minlength" id="minlength" autocomplete="off" /><input type="hidden" name="mode" id="mode" value="inline" autocomplete="off" /> <div class="w-64"> <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="Mew" data-input-mode-value="inline" data-input-form-value=""> <div class="w-full flex flex-col"> <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> <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> </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.
Related components
| 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="text-primary-lg-regular 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="text-primary-lg-regular 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 |
|
|
|
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. |
open_actions |
false |
Open field in edit mode by default. |
Text field specific arguments
| Property | Default | Description |
|---|---|---|
maxlength |
nil |
Maximum length of the input field. |
minlength |
nil |
Minimum length of the input field. |
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",) %>The relevant part of the generated HTML is:
<input name="some_name" type="text" value="default value" 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.