Form Row
Arrange related fields in equal-width columns that stack in narrow containers
<sa-form-row>
<sa-field>
<sa-field-label for="intro-FirstName">First name</sa-field-label>
<sa-input id="intro-FirstName" name="FirstName" />
<sa-field-description>Use the name on your travel document.</sa-field-description>
</sa-field>
<sa-field>
<sa-field-label for="intro-LastName">Last name</sa-field-label>
<sa-input id="intro-LastName" name="LastName" />
</sa-field>
</sa-form-row>Usage
Wrap related fields in <sa-form-row>. Each direct child occupies one equal-width column when the row has at least 40rem of available width. Below that width, the fields stack in a single column. The layout responds to the row's container, so a narrow panel stacks its fields even on a wide screen.
<sa-form-row>
<sa-input asp-for="FirstName" />
<sa-input asp-for="LastName" />
</sa-form-row>Use model-bound inputs or explicit fields as children. No column count or special child tag is required. Children align at the top, so helper text below one input does not move a neighboring input down.
Examples
Three columns
Add a third child to create three equal-width columns. Rows switch between a single line of columns and a vertical stack; they do not wrap into intermediate rows.
<sa-form-row>
<sa-field>
<sa-field-label for="threecolumns-City">City</sa-field-label>
<sa-input id="threecolumns-City" name="City" />
</sa-field>
<sa-field>
<sa-field-label for="threecolumns-Region">State or region</sa-field-label>
<sa-input id="threecolumns-Region" name="Region" />
</sa-field>
<sa-field>
<sa-field-label for="threecolumns-PostalCode">Postal code</sa-field-label>
<sa-input id="threecolumns-PostalCode" name="PostalCode" />
</sa-field>
</sa-form-row>Inside a section
Combine a row with a Form Section to group fields under a title and description. In a split section, the width available to the fields determines whether the row stacks. Open the full preview to compare the layouts as you resize the window.
<sa-form-section title="Traveler details" description="The lead contact for your Voyager booking.">
<sa-form-row>
<sa-field>
<sa-field-label for="insection-FirstName">First name</sa-field-label>
<sa-input id="insection-FirstName" name="FirstName" />
<sa-field-description>Use the name on your travel document.</sa-field-description>
</sa-field>
<sa-field>
<sa-field-label for="insection-LastName">Last name</sa-field-label>
<sa-input id="insection-LastName" name="LastName" />
</sa-field>
</sa-form-row>
</sa-form-section>Narrow container
The same row stacks automatically inside a narrow container.
<sa-form-row>
<sa-field>
<sa-field-label for="narrow-FirstName">First name</sa-field-label>
<sa-input id="narrow-FirstName" name="FirstName" />
<sa-field-description>Use the name on your travel document.</sa-field-description>
</sa-field>
<sa-field>
<sa-field-label for="narrow-LastName">Last name</sa-field-label>
<sa-input id="narrow-LastName" name="LastName" />
</sa-field>
</sa-form-row>Single field
A row with one child uses the full available width.
<sa-form-row>
<sa-field>
<sa-field-label for="singlefield-BookingCode">Booking code</sa-field-label>
<sa-input id="singlefield-BookingCode" name="BookingCode" />
</sa-field>
</sa-form-row>Spacing
Rows use the active theme's medium gap. Override it with a utility class from your application's stylesheet:
<sa-form-row class="gap-6">
<sa-input asp-for="FirstName" />
<sa-input asp-for="LastName" />
</sa-form-row>API Reference
<sa-form-row>
Renders a <div> with an inner grid. It has no component-specific attributes. Standard HTML attributes and class apply to the outer element.
Each direct child should represent one field or another unit of form content. A row provides visual layout; it does not render a <form> or <fieldset>.