Form section

A section frame for one complete caller-owned Rails form and an optional typed status.

Source
The complete form element is a named leaf. Rails keeps naming, CSRF, model errors, multipart behavior, and submission semantics.
API
Supply the required title and optional description through constructor text or matching compound methods. form requires exactly one block that renders a complete form. status accepts at most one NitroKit::Alert before it.

Rails-owned complete forms

The section frames one complete form and an optional typed status without owning fields, models, routes, or submission policy.

Minimal form

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/form_section_page.rb
render_form_section(
  id: "gallery-form-section-minimal",
  title: "Workspace name",
  fields: [ [ :name, "Workspace name" ] ]
)

Validation status

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/form_section_page.rb
render NitroKit::FormSection.new(
  title: "Profile",
  description: "Public details shown to workspace members.",
  id: "gallery-form-section-validation"
) do |section|
  section.status NitroKit::Alert.new(variant: :error, id: "gallery-form-section-validation-status") do |alert|
    alert.title("Profile was not saved")
    alert.description("Correct the highlighted name and email fields.")
  end
  section.form do
    form_with(url: "#profile", scope: :profile, builder: NitroKit::FormBuilder, id: "gallery-form-section-validation-form") do |form|
      form.field(:name, label: "Display name", value: "", errors: [ "cannot be blank" ], required: true)
      form.field(:email, as: :email, label: "Email", value: "not-an-email", errors: [ "is invalid" ], required: true)
      form.submit("Save profile")
    end
  end
end

Success status

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/form_section_page.rb
render NitroKit::FormSection.new(
  title: "Notification settings",
  description: "Choose which operational changes should send email.",
  id: "gallery-form-section-success"
) do |section|
  section.status NitroKit::Alert.new(variant: :success, id: "gallery-form-section-success-status") do |alert|
    alert.title("Notification settings saved")
    alert.description("New incidents and weekly summaries will be delivered to [email protected].")
  end
  section.form do
    form_with(url: "#notifications", scope: :notifications, builder: NitroKit::FormBuilder, id: "gallery-form-section-success-form") do |form|
      form.field(:incidents, as: :switch, label: "Incident alerts", checked: true)
      form.field(:summaries, as: :switch, label: "Weekly summaries", checked: true)
      form.submit("Save notifications")
    end
  end
end

Dense long form

ViewportFull width
Rubytest/dummy/app/components/gallery/blocks/form_section_page.rb
render NitroKit::Container.new(size: :lg, id: "gallery-form-section-dense-container") do
  render_form_section(
    id: "gallery-form-section-dense",
    title: "International Research and Reliability workspace profile",
    description: "Long labels, guidance, and a complete caller-owned form exercise the boundary without teaching the block about a Rails model.",
    fields: [
      [ :name, "Official workspace name" ],
      [ :billing_email, "Billing and compliance contact email" ],
      [ :legal_entity, "Contracting legal entity" ],
      [ :data_region, "Primary encrypted data residency region" ],
      [ :retention, "Audit event retention policy acknowledgement" ]
    ]
  )
end