Fieldset
Installation
Included in poetry-ui — available as
poetry_fieldset
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 fieldset
Default
Open Default standalone
<%# A real <fieldset> named by a real <legend> (legend: is required - the
group's accessible name); hint: describes the group and the FieldGroup
inside owns the stacking rhythm. %>
<div class="w-full max-w-sm">
<%= poetry_fieldset(legend: "Address information",
hint: "We need your address to deliver your order.") do %>
<%= poetry_field_group do %>
<%= poetry_field(id: "fieldset-street", label_text: "Street address") do |field| %>
<%= poetry_input(name: "street", placeholder: "123 Main St",
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<div class="grid grid-cols-2 gap-4">
<%= poetry_field(id: "fieldset-city", label_text: "City") do |field| %>
<%= poetry_input(name: "city", placeholder: "New York",
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<%= poetry_field(id: "fieldset-zip", label_text: "Postal code") do |field| %>
<%= poetry_input(name: "zip", placeholder: "90502",
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
</div>
<% end %>
<% end %>
</div>
Label legend
Open Label legend standalone
<%# legend_variant: :label renders the legend at label size - the
checkbox/switch-run form, where the group reads as one setting. %>
<div class="w-full max-w-xs">
<%= poetry_fieldset(legend: "Email me about", legend_variant: :label,
hint: "Unsubscribe anytime.") do %>
<%= poetry_field_group(variant: :choices) do %>
<%= poetry_field(id: "fieldset-product-news", label_text: "Product news",
orientation: :horizontal) do |field| %>
<%= poetry_checkbox(name: "product_news", checked: true,
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<%= poetry_field(id: "fieldset-security", label_text: "Security alerts",
orientation: :horizontal) do |field| %>
<%= poetry_checkbox(name: "security_alerts", checked: true,
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<%= poetry_field(id: "fieldset-digest", label_text: "Weekly digest",
orientation: :horizontal) do |field| %>
<%= poetry_checkbox(name: "digest",
**field.control_attributes.transform_keys(&:to_sym)) %>
<% end %>
<% end %>
<% end %>
</div>
API
Poetry::Ui::Fieldset::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 |
|---|---|---|---|
| hint: | String | Muted description under the legend; per-field hints stay on the fields. | |
| legend: | String | required | The group's accessible name - renders as the real <legend>. |
| legend_variant: | Symbol | one of: legend, label; defaults to :legend |
:label renders the legend at label size - for a group that is one setting explained by its rows (checkbox/switch runs). |
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-set] | The <fieldset> root - legend, optional hint, then the fields |
| [data-slot=field-legend] | The <legend> - the group's accessible name |
| [data-slot=field-set-hint] | Muted description under the legend (hint:) |
State attributes
| Part | Attribute | Condition | Values |
|---|---|---|---|
| field-legend | data-variant | always - the legend's size treatment | legend · label |