Field Set

Groups a label, one or more fields, and optional help text into a single form unit.

Prop	Type	Default	Notes
`stack`	String	`"column"`	One of STACKS: "column" (default) stacks label → fields → helptext vertically; "row" puts the label in a 110px left column, vertically centered, with field + helptext on the right.
`**html_options`	Hash	—	Extra HTML attributes for the root `<div>`.

Slots: fields helptext label

Default

Label

<%= render FieldSetComponent.new do |f| %>
  <% f.with_label(text: "Label", for: "field") %>
  <% f.with_field do %>
    <%= render TextFieldComponent.new(name: "field", id: "field") %>
  <% end %>
<% end %>

Multiple fields

Name

<%= render FieldSetComponent.new do |f| %>
  <% f.with_label(text: "Name", for: "field") %>
  <% f.with_field do %>
    <%= render TextFieldComponent.new(name: "first", placeholder: "First name") %>
  <% end %>
  <% f.with_field do %>
    <%= render TextFieldComponent.new(name: "last", placeholder: "Last name") %>
  <% end %>
<% end %>

Row

Label

<%= render FieldSetComponent.new(stack: "row") do |f| %>
  <% f.with_label(text: "Label", for: "field") %>
  <% f.with_field do %>
    <%= render TextFieldComponent.new(name: "field", id: "field") %>
  <% end %>
<% end %>

Row with helptext

Label

This is some helptext that can span upto 2 lines.

<%= render FieldSetComponent.new(stack: "row") do |f| %>
  <% f.with_label(text: "Label", for: "field") %>
  <% f.with_field do %>
    <%= render TextFieldComponent.new(name: "field", id: "field") %>
  <% end %>
  <% f.with_helptext { "This is some helptext that can span upto 2 lines." } %>
<% end %>

With helptext

Label

This is some helptext that can span upto 2 lines.

<%= render FieldSetComponent.new do |f| %>
  <% f.with_label(text: "Label", for: "field") %>
  <% f.with_field do %>
    <%= render TextFieldComponent.new(name: "field", id: "field") %>
  <% end %>
  <% f.with_helptext { "This is some helptext that can span upto 2 lines." } %>
<% end %>

With info

Label

<%= render FieldSetComponent.new do |f| %>
  <% f.with_label(text: "Label", info: true, for: "field") %>
  <% f.with_field do %>
    <%= render TextFieldComponent.new(name: "field", id: "field") %>
  <% end %>
<% end %>

1	<%= render FieldSetComponent.new do \|f\| %>
2	<% f.with_label(text: "Label", for: "field") %>
3	<% f.with_field do %>
4	<%= render TextFieldComponent.new(name: "field", id: "field") %>
5	<% end %>
6	<% end %>

1	<%= render FieldSetComponent.new do \|f\| %>
2	<% f.with_label(text: "Name", for: "field") %>
3	<% f.with_field do %>
4	<%= render TextFieldComponent.new(name: "first", placeholder: "First name") %>
5	<% end %>
6	<% f.with_field do %>
7	<%= render TextFieldComponent.new(name: "last", placeholder: "Last name") %>
8	<% end %>
9	<% end %>

1	<%= render FieldSetComponent.new(stack: "row") do \|f\| %>
2	<% f.with_label(text: "Label", for: "field") %>
3	<% f.with_field do %>
4	<%= render TextFieldComponent.new(name: "field", id: "field") %>
5	<% end %>
6	<% end %>

1	<%= render FieldSetComponent.new do \|f\| %>
2	<% f.with_label(text: "Label", info: true, for: "field") %>
3	<% f.with_field do %>
4	<%= render TextFieldComponent.new(name: "field", id: "field") %>
5	<% end %>
6	<% end %>