PhoenixKitWeb.Components.Core.FormSection (phoenix_kit v1.7.185)

Card-wrapped form section with a titled header.

Replaces the repeated boilerplate:

<div class="card bg-base-100 shadow-lg">
  <div class="card-body">
    <h2 class="card-title text-lg">Section Name</h2>
    ...fields...
  </div>
</div>

with a single component call. Used in every form-heavy admin page.

Attributes

title — Section heading text. Required.
icon — Optional Heroicon name rendered before the title (e.g. "hero-cog-6-tooth").
class — Extra classes appended to the outer card wrapper.
body_class — Extra classes appended to the card body wrapper (typical use: "space-y-4" for vertical field spacing).

Slots

inner_block — Section content (form fields). Required.
:subtitle — Optional helper text rendered under the title. Slot (not attr) so callers can drop a <.pk_link> / <.icon> / etc. inline.

Example

<.form_section title={gettext("Provider Configuration")}>
  <:subtitle>
    {gettext("Credentials live in")}
    <.pk_link navigate="/admin/settings/integrations" class="link link-primary">
      Settings → Integrations
    </.pk_link>.
  </:subtitle>
  <.select field={@form[:provider]} ... />
</.form_section>

<.form_section title={gettext("Basic Information")} body_class="space-y-4">
  <.input field={@form[:name]} label="Name" required />
</.form_section>

Summary

Functions

form_section(assigns)

section_header(assigns)

Lightweight in-card section heading — groups related fields inside one form/card without the full form_section card wrapper (icon + title + rule). Used by the settings pages (General, Authorization).

unsaved_hint(assigns)

Per-field dirty indicator: renders only when the pending value differs from the saved one, showing what's currently saved. Replaces always-on "Saved: X | Selected: Y" echoes so clean fields carry no noise.

Functions

form_section(assigns)

Attributes

title (:string) (required)
icon (:string) - Defaults to nil.
class (:string) - Defaults to nil.
body_class (:string) - Defaults to nil.
Global attributes are accepted.