diff --git a/.changeset/tough-bats-refuse.md b/.changeset/tough-bats-refuse.md
new file mode 100644
index 0000000000..681a84e3ef
--- /dev/null
+++ b/.changeset/tough-bats-refuse.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix widths of text fields and multi inputs.
diff --git a/app/forms/select_form.rb b/app/forms/select_form.rb
index eff2f78c63..8cd5b59cf1 100644
--- a/app/forms/select_form.rb
+++ b/app/forms/select_form.rb
@@ -2,8 +2,8 @@
# :nodoc:
class SelectForm < ApplicationForm
- form do |check_form|
- check_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true) do |city_list|
+ form do |select_form|
+ select_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true) do |city_list|
city_list.option(label: "Lopez Island", value: "lopez_island")
city_list.option(label: "Bellevue", value: "bellevue")
city_list.option(label: "Seattle", value: "seattle")
diff --git a/lib/primer/forms/form_control.html.erb b/lib/primer/forms/form_control.html.erb
index 4ffd9fb707..a53e9659d4 100644
--- a/lib/primer/forms/form_control.html.erb
+++ b/lib/primer/forms/form_control.html.erb
@@ -1,5 +1,5 @@
<% if @input.form_control? %>
- <%= content_tag(:div, **@form_group_arguments) do %>
+ <%= content_tag(@tag, **@form_group_arguments) do %>
<% if @input.label %>
<%= builder.label(@input.name, **@input.label_arguments) do %>
<%= @input.label %>
diff --git a/lib/primer/forms/form_control.rb b/lib/primer/forms/form_control.rb
index 6bf6e47d41..2cbc73df6a 100644
--- a/lib/primer/forms/form_control.rb
+++ b/lib/primer/forms/form_control.rb
@@ -6,11 +6,15 @@ module Forms
class FormControl < BaseComponent
delegate :builder, :form, to: :@input
- def initialize(input:)
+ def initialize(input:, tag: :div, **system_arguments)
@input = input
+ @tag = tag
@input.add_label_classes("FormControl-label")
@form_group_arguments = {
+ **system_arguments,
class: class_names(
+ system_arguments[:class],
+ system_arguments[:classes],
"FormControl",
"width-full",
"FormControl--fullWidth" => @input.full_width?
diff --git a/lib/primer/forms/multi.html.erb b/lib/primer/forms/multi.html.erb
index 4a05bc63a8..75d63b4e4e 100644
--- a/lib/primer/forms/multi.html.erb
+++ b/lib/primer/forms/multi.html.erb
@@ -1,9 +1,7 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
- <%= render(FormControl.new(input: @input)) do %>
-
- <% @input.inputs.each do |child_input| %>
- <%= render(child_input.to_component) %>
- <% end %>
-
- <% end %>
+<%= render(FormControl.new(input: @input, **@input.input_arguments)) do %>
+
+ <% @input.inputs.each do |child_input| %>
+ <%= render(child_input.to_component) %>
+ <% end %>
+
<% end %>
diff --git a/lib/primer/forms/text_field.html.erb b/lib/primer/forms/text_field.html.erb
index 0d5c5ae0d4..0c7a3aa89f 100644
--- a/lib/primer/forms/text_field.html.erb
+++ b/lib/primer/forms/text_field.html.erb
@@ -1,19 +1,17 @@
-
- <%= render(FormControl.new(input: @input)) do %>
- <%= content_tag(:div, **@field_wrap_arguments) do %>
- <% if @input.leading_visual %>
-
- <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %>
-
- <% end %>
- <%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "auto-check", csrf: auto_check_authenticity_token, src: @input.auto_check_src) do %>
- <%= builder.text_field(@input.name, **@input.input_arguments) %>
- <% end %>
- <% if @input.show_clear_button? %>
-
- <% end %>
+<%= render(FormControl.new(input: @input, tag: :"primer-text-field")) do %>
+ <%= content_tag(:div, **@field_wrap_arguments) do %>
+ <% if @input.leading_visual %>
+
+ <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %>
+
+ <% end %>
+ <%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "auto-check", csrf: auto_check_authenticity_token, src: @input.auto_check_src) do %>
+ <%= builder.text_field(@input.name, **@input.input_arguments) %>
+ <% end %>
+ <% if @input.show_clear_button? %>
+
<% end %>
<% end %>
-
+<% end %>
diff --git a/test/lib/primer/forms/forms_test.rb b/test/lib/primer/forms/forms_test.rb
index 4abd5ac469..93e32c7241 100644
--- a/test/lib/primer/forms/forms_test.rb
+++ b/test/lib/primer/forms/forms_test.rb
@@ -275,4 +275,16 @@ def test_renders_field_name_with_question_mark_caption_template
assert_selector "input[name=enabled]"
assert_selector ".my-test-caption"
end
+
+ def test_text_field_custom_element_is_form_control
+ render_preview :single_text_field_form
+
+ assert_selector "primer-text-field.FormControl"
+ end
+
+ def test_siblings_are_form_controls_when_including_a_multi_input
+ render_preview :multi_input_form
+
+ assert_selector ".FormControl-radio-group-wrap + .FormControl"
+ end
end