app/components/phone_input_component.html.erb
<%= content_tag(
'lg-phone-input',
class: tag_options[:class],
data: {
delivery_methods:,
translated_country_code_names:,
},
) do %>
<%= content_tag(
:script,
strings.to_json,
{
type: 'application/json',
class: 'phone-input__strings',
},
false,
) %>
<div class="phone-input__international-code-wrapper">
<%= f.label(
:international_code,
class: 'usa-label',
) { t('components.phone_input.country_code_label') } %>
<%= f.input(
:international_code,
collection: international_phone_codes,
include_blank: false,
label: false,
input_html: {
class: 'phone-input__international-code',
data: { countries: supported_country_codes },
},
) %>
</div>
<%= f.label(
:phone,
class: 'usa-label',
) { t('two_factor_authentication.phone_label') } %>
<%= render ValidatedFieldComponent.new(
form: f,
name: :phone,
error_messages: {
valueMissing: t('errors.messages.phone_required'),
},
as: :tel,
required:,
label: false,
wrapper_html: {
class: 'margin-bottom-0',
},
input_html: {
class: 'phone-input__number',
},
) %>
<% end %>
<%= stylesheet_link_tag 'intlTelInput' %>