Field Separator

Installation

Included in poetry-ui — available as poetry_field_separator 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-separator

Default

Username

<%# The divider between stacked fields inside a FieldGroup - a decorative
    rule drawn across the row. %>
<div class="w-full max-w-xs">
  <%= poetry_field_group do %>
    <%= poetry_field(id: "separator-email", label_text: "Email") do |field| %>
      <%= poetry_input(type: "email", name: "email",
                       **field.control_attributes.transform_keys(&:to_sym)) %>
    <% end %>
    <%= poetry_field_separator %>
    <%= poetry_field(id: "separator-username", label_text: "Username") do |field| %>
      <%= poetry_input(name: "username",
                       **field.control_attributes.transform_keys(&:to_sym)) %>
    <% end %>
  <% end %>
</div>

With caption

Or continue with

<%# Pass a block for the inline caption form - the caption sits on the
    line, backed by the page background. %>
<div class="w-full max-w-xs">
  <%= poetry_field_group do %>
    <%= poetry_field(id: "caption-email", label_text: "Email") do |field| %>
      <%= poetry_input(type: "email", name: "email",
                       **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>

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-separator]	The divider row - a decorative Separator drawn across it
[data-slot=field-separator-content]	The inline caption span (block content) - sits on the line, backed by the page background

State attributes

Part	Attribute	Condition	Values
field-separator	data-content	always - whether the inline caption renders	true · false