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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<div class="space-y-8">
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Default (no state)</p>
    <div class="w-80">
      <div class="lui-phone-number lui-phone-number--inline relative" data-controller="phone-number" data-phone-number-initial-country-value="pt" data-phone-number-separate-dial-code-value="true" data-phone-number-country-search-value="true" data-phone-number-show-flags-value="true" data-phone-number-format-as-you-type-value="true" data-phone-number-strict-mode-value="true" data-phone-number-allowed-number-types-value="["MOBILE","FIXED_LINE"]" data-phone-number-placeholder-number-type-value="MOBILE" data-phone-number-country-name-locale-value="en" data-phone-number-has-country-input-value="false">
        <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="_looposui-inputs-phonenumber_phone_default_5793709857" type="tel" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-phone-number-target="visibleInput" autocomplete="off">
                <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>
        <input type="hidden" name="phone_default" id="phone_default" data-phone-number-target="hiddenInput" />
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">With help text</p>
    <div class="w-80">
      <div class="lui-phone-number lui-phone-number--inline relative" data-controller="phone-number" data-phone-number-initial-country-value="pt" data-phone-number-separate-dial-code-value="false" data-phone-number-country-search-value="true" data-phone-number-show-flags-value="true" data-phone-number-format-as-you-type-value="true" data-phone-number-strict-mode-value="true" data-phone-number-allowed-number-types-value="["MOBILE","FIXED_LINE"]" data-phone-number-placeholder-number-type-value="MOBILE" data-phone-number-country-name-locale-value="en" data-phone-number-has-country-input-value="false">
        <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="_looposui-inputs-phonenumber_phone_help_9912568611" type="tel" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-phone-number-target="visibleInput" autocomplete="tel">
                <span class="lui-input__spinner">
                  <i class="fa-regular fa-spinner"></i>
                </span>
              </span>      </div>
            <span class="lui-input__help">Include country code. E.g. +351 912 345 678</span>
          </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>
        <input type="hidden" name="phone_help" id="phone_help" data-phone-number-target="hiddenInput" />
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">With error</p>
    <div class="w-80">
      <div class="lui-phone-number lui-phone-number--inline relative" data-controller="phone-number" data-phone-number-initial-country-value="pt" data-phone-number-separate-dial-code-value="true" data-phone-number-country-search-value="true" data-phone-number-show-flags-value="true" data-phone-number-format-as-you-type-value="true" data-phone-number-strict-mode-value="true" data-phone-number-allowed-number-types-value="["MOBILE","FIXED_LINE"]" data-phone-number-placeholder-number-type-value="MOBILE" data-phone-number-country-name-locale-value="en" data-phone-number-has-country-input-value="false">
        <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value="123"
    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 lui-input--with-error">
                <input name="_looposui-inputs-phonenumber_phone_error_2322156580" type="tel" value="123" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-phone-number-target="visibleInput" autocomplete="off">
                <span class="lui-input__spinner">
                  <i class="fa-regular fa-spinner"></i>
                </span>
              </span>      </div>
            <span class="lui-input__error">is not a valid phone number</span>
          </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>
        <input type="hidden" name="phone_error" id="phone_error" value="123" data-phone-number-target="hiddenInput" />
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Readonly — value displayed as text</p>
    <div class="w-80">
      <div class="lui-phone-number lui-phone-number--inline relative" data-controller="phone-number" data-phone-number-initial-country-value="pt" data-phone-number-separate-dial-code-value="true" data-phone-number-country-search-value="true" data-phone-number-show-flags-value="true" data-phone-number-format-as-you-type-value="true" data-phone-number-strict-mode-value="true" data-phone-number-allowed-number-types-value="["MOBILE","FIXED_LINE"]" data-phone-number-placeholder-number-type-value="MOBILE" data-phone-number-country-name-locale-value="en" data-phone-number-has-country-input-value="false">
        <span class="lui-input__value">+351912345678</span>
        <input type="hidden" name="phone_readonly" id="phone_readonly" value="+351912345678" data-phone-number-target="hiddenInput" />
      </div>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Readonly — empty value</p>
    <div class="w-80">
      <div class="lui-phone-number lui-phone-number--inline relative" data-controller="phone-number" data-phone-number-initial-country-value="pt" data-phone-number-separate-dial-code-value="true" data-phone-number-country-search-value="true" data-phone-number-show-flags-value="true" data-phone-number-format-as-you-type-value="true" data-phone-number-strict-mode-value="true" data-phone-number-allowed-number-types-value="["MOBILE","FIXED_LINE"]" data-phone-number-placeholder-number-type-value="MOBILE" data-phone-number-country-name-locale-value="en" data-phone-number-has-country-input-value="false">
        <span class="lui-input__value">-</span>
        <input type="hidden" name="phone_readonly_empty" id="phone_readonly_empty" data-phone-number-target="hiddenInput" />
      </div>
    </div>
  </div>
</div>

No Usage documentation to display.

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 class="space-y-8">
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Default (no state)</p>
    <div class="w-80">
      <%= render LooposUi::Inputs::PhoneNumber.new(
        name: "phone_default",
        value: nil,
        initial_country: "pt",
        autocomplete_type: "off",
      ) %>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">With help text</p>
    <div class="w-80">
      <%= render LooposUi::Inputs::PhoneNumber.new(
        name: "phone_help",
        value: nil,
        initial_country: "pt",
        separate_dial_code: false,
        autocomplete_type: "tel",
        help: "Include country code. E.g. +351 912 345 678"
      ) %>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">With error</p>
    <div class="w-80">
      <%= render LooposUi::Inputs::PhoneNumber.new(
        name: "phone_error",
        value: "123",
        initial_country: "pt",
        error: "is not a valid phone number"
      ) %>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Readonly — value displayed as text</p>
    <div class="w-80">
      <%= render LooposUi::Inputs::PhoneNumber.new(
        name: "phone_readonly",
        value: "+351912345678",
        initial_country: "pt",
        readonly: true
      ) %>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Readonly — empty value</p>
    <div class="w-80">
      <%= render LooposUi::Inputs::PhoneNumber.new(
        name: "phone_readonly_empty",
        value: nil,
        initial_country: "pt",
        readonly: true
      ) %>
    </div>
  </div>
</div>

No notes provided.

No params configured.

Description

LooposUi::Inputs::PhoneNumber is an international telephone number input component powered by intl-tel-input. It provides a country-flag selector, dial code display, real-time formatting, and client-side validation. The component submits phone numbers in E.164 format via a hidden field, keeping the visible input human-readable.

Dependencies

  • JavaScript: intl-tel-input (v29+), loaded lazily via dynamic import("intl-tel-input/utils")
  • Stimulus controller: phone-number (app/javascript/controllers/phone_number_controller.js)
  • CSS: intl-tel-input/dist/css/intlTelInput.css (imported in application.postcss.css)

Arguments

Base Arguments

Property Default Description
model nil ActiveRecord instance.
attribute nil Attribute name of the model.
name nil Name of the hidden (submitted) field. Required when model is not provided.
value nil Initial phone value. Prefer E.164 format (e.g. +351912345678) so the controller can restore the correct country.
placeholder nil Placeholder shown in the visible input.
error nil Error message. Automatically extracted from model errors when model is present.
help nil Help text shown below the input.
mode :inline :inline, :form, or :autosubmit.
appearance nil Visual modifier. Defaults to mode when omitted.
form nil HTML form attribute to associate the input with a specific form element.
readonly false When true, renders the value as plain text without an editable input.
custom_readonly false In readonly mode, renders provided content instead of the plain value.
open_actions false Open field in edit mode by default (inline mode).
extra_input_attributes {} Extra HTML attributes merged onto the visible <input type="tel"> element.

Phone-specific Arguments

Property Default Description
autocomplete_type "off" HTML autocomplete token for the visible input (e.g. "tel", "off"). Disabled by default.
initial_country "pt" ISO2 country code preselected on load (e.g. "pt", "gb", "us").
separate_dial_code true Show the dial code next to the flag in a separate box.
country_search true Enable a search field in the country dropdown.
show_flags true Show country flag icons.
format_as_you_type true Format the phone number as the user types.
strict_mode true Restrict input to valid phone number characters only.
allowed_number_types ["MOBILE", "FIXED_LINE"] Restrict validation to these number types.
placeholder_number_type "MOBILE" Number type used to generate the placeholder example. Accepted: "MOBILE", "FIXED_LINE", "FIXED_LINE_OR_MOBILE".
locale I18n.locale.to_s Locale for country name display (countryNameLocale).
submit_country_name nil When provided, a second hidden input is rendered with this name to store the selected ISO2 country.

Submit Value Strategy

The component renders two inputs:

  1. Visible <input type="tel"> — enhanced by intl-tel-input for formatting and country selection. Uses a safe internal name (never submitted directly).
  2. Hidden <input type="hidden"> — carries the real field name and the E.164 formatted value. Updated by the Stimulus controller on input, change, blur, countrychange, and form submit events.

When intl-tel-input considers the number valid (iti.isValidNumber()), the hidden field receives the E.164 output of iti.getNumber() (e.g. +351912345678). When the number is invalid or the utils are not yet ready, the raw visible value is stored so the consuming application can validate and report errors.

If submit_country_name is set, a third hidden field is updated with the selected country ISO2 code (e.g. "pt").

Validation Note

  • Client side: intl-tel-input formats and syncs the E.164 value in real time. Invalid numbers fall back to the raw visible value in the hidden field.
  • Server side: Final validation is the responsibility of the consuming application. Treat client-side formatting as a convenience, not as the source of truth.

Usage

Example using name + value

<%= render LooposUi::Inputs::PhoneNumber.new(
  name: "contact_phone",
  value: "+351912345678",
  initial_country: "pt",
  placeholder: "Enter phone number",
  help: "Include country code"
) %>

Example using model + attribute

<%= render LooposUi::Inputs::PhoneNumber.new(
  model: @contact,
  attribute: :phone_number,
  initial_country: "gb"
) %>

The hidden input will use the Rails field name contact[phone_number] and pick up the model's current value and errors automatically.

Example with submit_country_name

<%= render LooposUi::Inputs::PhoneNumber.new(
  name: "phone",
  value: nil,
  initial_country: "us",
  submit_country_name: "phone_country_code"
) %>

This renders an extra <input type="hidden" name="phone_country_code"> that is updated with the selected ISO2 country code (e.g. "us") on every change.

⚠️ Important

  • Pass existing phone numbers as E.164 strings (e.g. "+351912345678") so the Stimulus controller can restore the correct country flag and national format on page load.
  • initial_country accepts lowercase ISO2 codes only (e.g. "pt", "gb", "us").
  • JS behavior (country picker, real-time sync) requires the intl-tel-input package and the phone-number Stimulus controller to be loaded. Verify with yarn build / yarn build:css.
  • Readonly mode renders the raw value as text; no JS enhancement is applied.

References