Form Section

A form section genera11y consists of a text section to provide users with instruction, guidance, or related information along with a secondary panel that may contain form inputs and/or related general content.


React Component

Default

Form Section Content Will Go Here

This component is designed to be very flexible and take any sort of content you want to pass to it.

Form Section with custom header tag

Form Section Content Will Go Here

This component is designed to be very flexible and take any sort of content you want to pass to it.

With Custom Subtitle

Form Section Content Will Go Here

This component is designed to be very flexible and take any sort of content you want to pass to it.

Sage Component

SageFormSection
<%= sage_component SagePanelStack, {} do %>

  <!-- Default -->
  <h3 class="t-sage-heading-6">Default</h3>
  <%= sage_component SageFormSection, {
    id:"c1",
    title: "Form Section Title",
    subtitle: "Helpful text that lets the customer have an idea how to work with the section.",
  } do %>
    <%= sage_component SageAlert, {
      title: "Form Section Content Will Go Here",
      desc: "This component is designed to be very flexible and take any sort of content you want to pass to it.",
      icon_name: "info-circle",
    } %>
  <% end %>

  <!-- Custom title_tag -->
  <h3 class="t-sage-heading-6">Form Section with custom header tag</h3>
  <%= sage_component SageFormSection, {
    id:"c2",
    title: "Custom Title Tag",
    subtitle: "Helpful text that lets the customer have an idea how to work with the section.",
    title_tag: "h3"
  } do %>
    <%= sage_component SageAlert, {
      title: "Form Section Content Will Go Here",
      desc: "This component is designed to be very flexible and take any sort of content you want to pass to it.",
      icon_name: "info-circle",
    } %>
  <% end %>

  <h3 class="t-sage-heading-6">With Custom Subtitle</h3>
  <%= sage_component SageFormSection, {
    id:"c1",
    title: "Form Section Title",
  } do %>
    <%= sage_component SageAlert, {
      title: "Form Section Content Will Go Here",
      desc: "This component is designed to be very flexible and take any sort of content you want to pass to it.",
      icon_name: "info-circle",
    } %>
    <%= content_for :sage_form_section_subtitle do %>
      <p>Helpful text that lets the customer have an idea how to work with the section.</p>
      <p>Additional helpful text that lets the customer have an idea how to work with the section.</p>
    <% end %>
  <% end %>
<% end %>
Property Description Type Default

id

Unique identifier for this component.

String

nil

subtitle

Sets the subtitle text for the component.

String

nil

title

Sets the title for the component.

String

nil

title_tag

Sets the heading tag (h1 - h6) for the Form Section's header tag.

String

h5

Do
  • Be sure to check the page's context when using title_tag to not introduce skipped heading levels a11y warnings