Field Group
Installation
Included in poetry-ui — available as
poetry_field_group
the moment you've installed Poetry,
with no per-component step. To own the source and edit it, copy it into your app:
bin/rails g poetry:add field-group
Default
Open Default standalone
Must be at least 8 characters.
Or continue with
<%# FieldGroup owns the stacking rhythm - fields, fieldsets, and
separators render as direct children. It is also the @container scope
responsive fields measure against. %>
<div class="w-full max-w-xs">
<%= poetry_field_group do %>
<%= poetry_field(id: "group-email", label_text: "Email") do |field| %>
<%= poetry_input(type: "email", name: "email",
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<%= poetry_field(id: "group-password", label_text: "Password",
hint: "Must be at least 8 characters.") do |field| %>
<%= poetry_input(type: "password", name: "password",
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<%= poetry_field_separator do %>Or continue with<% end %>
<%= poetry_button(variant: :outline, class: "w-full") { "Login with Google" } %>
<% end %>
</div>
Choices
Open Choices standalone
<%# variant: :choices packs a run of horizontal checkbox/switch fields
tighter - the settings-list rhythm. %>
<div class="w-full max-w-xs">
<%= poetry_field_group(variant: :choices) do %>
<%= poetry_field(id: "choices-comments", label_text: "Comments",
orientation: :horizontal) do |field| %>
<%= poetry_checkbox(name: "comments", checked: true,
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<%= poetry_field(id: "choices-mentions", label_text: "Mentions",
orientation: :horizontal) do |field| %>
<%= poetry_checkbox(name: "mentions", checked: true,
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<%= poetry_field(id: "choices-follows", label_text: "New followers",
orientation: :horizontal) do |field| %>
<%= poetry_checkbox(name: "follows",
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<% end %>
</div>
API
Poetry::Ui::FieldGroup::Component — options are
constructor keywords (the poetry_* helper forwards them);
slots are composed inside the block. Generated from the gem's source documentation.
| Option | Type | Details | Description |
|---|---|---|---|
| variant: | Symbol | one of: default, choices; defaults to :default |
:choices packs a run of horizontal checkbox/switch fields tighter. |
Styling
Every part carries a stable data-slot attribute — target
[data-slot=…] from your own CSS to restyle it. State rides
data attributes on the parts below. This contract is verified against rendered DOM in CI.
| Part | Description |
|---|---|
| [data-slot=field-group] | The stacking container - fields, fieldsets, and separators render as direct children; also the @container responsive fields measure against |