Form Section
Group form content with a title and description using split, stacked, or card layouts
<sa-form-section title="Trip details" description="How this trip appears in the Voyager catalog.">
<sa-field-group>
<sa-form-row>
<sa-field>
<sa-field-label for="split-name">Trip name</sa-field-label>
<sa-input id="split-name" name="TripName" value="A week in Kyoto" />
<sa-field-description>The name travelers see.</sa-field-description>
</sa-field>
<sa-field>
<sa-field-label for="split-code">Booking code</sa-field-label>
<sa-input id="split-code" name="BookingCode" value="KYO-07" />
</sa-field>
</sa-form-row>
<sa-field>
<sa-field-label for="split-description">Description</sa-field-label>
<sa-textarea id="split-description" name="Description" rows="4" class="min-h-28">Explore Kyoto's temples, gardens, and local food.</sa-textarea>
<sa-field-description>Describe the trip and its highlights.</sa-field-description>
</sa-field>
</sa-field-group>
</sa-form-section>
<sa-form-section title="Availability" description="Set the number of places travelers can book.">
<sa-field-group>
<sa-field>
<sa-field-label for="split-places">Available places</sa-field-label>
<sa-input id="split-places" name="AvailablePlaces" type="number" min="0" value="12" />
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="split-waitlist" name="AllowWaitlist" />
<sa-field-content>
<sa-field-label for="split-waitlist">Allow waitlist</sa-field-label>
<sa-field-description>Accept requests when the trip is full.</sa-field-description>
</sa-field-content>
</sa-field>
</sa-field-group>
</sa-form-section>Usage
Use <sa-form-section> to group related fields under a title and optional description. Place fields, form rows, or other Razor content inside it.
<sa-form-section title="Traveler details"
description="The lead contact for this booking.">
<sa-form-row>
<sa-input asp-for="FirstName" />
<sa-input asp-for="LastName" />
</sa-form-row>
</sa-form-section>The default layout is FormSectionLayout.Split. The title and description sit beside the content when the section is at least 48rem wide and above it in narrower containers. Open the full preview to see how the layout changes as you resize the window.
Layouts
Split
Select Split explicitly to use side headings regardless of the app default. Heading placement responds to the section's available width, rather than the viewport width.
<sa-form-section title="Traveler details" layout="FormSectionLayout.Split">
...
</sa-form-section>Stacked
Stacked keeps the title and description above the content at every width. Adjacent plain sections are separated by a line and spacing.
<sa-form-section title="Trip details" description="How this trip appears in the Voyager catalog." layout="FormSectionLayout.Stacked">
<sa-field-group>
<sa-form-row>
<sa-field>
<sa-field-label for="stacked-name">Trip name</sa-field-label>
<sa-input id="stacked-name" name="TripName" value="A week in Kyoto" />
<sa-field-description>The name travelers see.</sa-field-description>
</sa-field>
<sa-field>
<sa-field-label for="stacked-code">Booking code</sa-field-label>
<sa-input id="stacked-code" name="BookingCode" value="KYO-07" />
</sa-field>
</sa-form-row>
<sa-field>
<sa-field-label for="stacked-description">Description</sa-field-label>
<sa-textarea id="stacked-description" name="Description" rows="4" class="min-h-28">Explore Kyoto's temples, gardens, and local food.</sa-textarea>
<sa-field-description>Describe the trip and its highlights.</sa-field-description>
</sa-field>
</sa-field-group>
</sa-form-section>
<sa-form-section title="Availability" description="Set the number of places travelers can book." layout="FormSectionLayout.Stacked">
<sa-field-group>
<sa-field>
<sa-field-label for="stacked-places">Available places</sa-field-label>
<sa-input id="stacked-places" name="AvailablePlaces" type="number" min="0" value="12" />
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="stacked-waitlist" name="AllowWaitlist" />
<sa-field-content>
<sa-field-label for="stacked-waitlist">Allow waitlist</sa-field-label>
<sa-field-description>Accept requests when the trip is full.</sa-field-description>
</sa-field-content>
</sa-field>
</sa-field-group>
</sa-form-section>Card
Card places each section inside a bordered surface, with a divider between its header and content. Card headings always appear above the fields.
<sa-form-section title="Trip details" description="How this trip appears in the Voyager catalog." layout="FormSectionLayout.Card">
<sa-field-group>
<sa-form-row>
<sa-field>
<sa-field-label for="card-name">Trip name</sa-field-label>
<sa-input id="card-name" name="TripName" value="A week in Kyoto" />
<sa-field-description>The name travelers see.</sa-field-description>
</sa-field>
<sa-field>
<sa-field-label for="card-code">Booking code</sa-field-label>
<sa-input id="card-code" name="BookingCode" value="KYO-07" />
</sa-field>
</sa-form-row>
<sa-field>
<sa-field-label for="card-description">Description</sa-field-label>
<sa-textarea id="card-description" name="Description" rows="4" class="min-h-28">Explore Kyoto's temples, gardens, and local food.</sa-textarea>
<sa-field-description>Describe the trip and its highlights.</sa-field-description>
</sa-field>
</sa-field-group>
</sa-form-section>
<sa-form-section title="Availability" description="Set the number of places travelers can book." layout="FormSectionLayout.Card">
<sa-field-group>
<sa-field>
<sa-field-label for="card-places">Available places</sa-field-label>
<sa-input id="card-places" name="AvailablePlaces" type="number" min="0" value="12" />
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="card-waitlist" name="AllowWaitlist" />
<sa-field-content>
<sa-field-label for="card-waitlist">Allow waitlist</sa-field-label>
<sa-field-description>Accept requests when the trip is full.</sa-field-description>
</sa-field-content>
</sa-field>
</sa-field-group>
</sa-form-section>Examples
Narrow container
A split section stacks its heading above the fields when placed inside a narrow panel.
<sa-form-section title="Traveler" description="The lead contact for this booking." layout="FormSectionLayout.Split">
<sa-field>
<sa-field-label for="narrow-name">Full name</sa-field-label>
<sa-input id="narrow-name" name="TravelerName" placeholder="Alex Morgan" />
</sa-field>
</sa-form-section>Without a description
Omit description when the title provides enough context.
<sa-form-section title="Booking notes" layout="FormSectionLayout.Card">
<sa-field>
<sa-field-label for="booking-notes">Notes</sa-field-label>
<sa-textarea id="booking-notes" name="Notes" placeholder="Add special requests or arrival details." />
</sa-field>
</sa-form-section>App default
Configure the default layout through AddStellarAdmin. Sections with no layout attribute inherit this setting. Without configuration, the default is Split.
using StellarAdmin;
using StellarAdmin.TagHelpers;
builder.Services.AddStellarAdmin(stellar =>
{
stellar.ConfigureForms(forms =>
{
forms.SectionLayout = FormSectionLayout.Card;
});
stellar.AddTagHelpers();
});An explicit layout overrides the app default for that section, including when you select Stacked or Split.
Accessibility
Each section renders a <section> with an <h2> title and an automatically associated accessible label. An explicit aria-label or aria-labelledby is preserved. The title and description are plain text. Use Field labels for individual inputs and <sa-field-set> when controls need a shared legend.
API Reference
<sa-form-section>
Prop
Type
Standard HTML attributes and class apply to the outer section. The component does not render a <form> or change how its child fields bind and validate.