Concorde UI component — Form layout. sonic-form-layout arranges slotted form controls in a responsive grid. Short fields (sonic-input · sonic-select) sit two per row when the host is wider than 440px; every other child spans the full wid Doc ID: core/components/ui/form/form-layout/form-layout. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, 440px, sonic-fieldset. URL: https://concorde.supersoniks.org/core/components/ui/form/form-layout.

Form layout

sonic-form-layout arranges slotted form controls in a responsive grid. Short fields (sonic-input · sonic-select) sit two per row when the host is wider than 440px; every other child spans the full width. It has no attributes: wrap the body of a form or sonic-fieldset with it.

Basic example

<form>
      <sonic-form-layout>
        <sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
        <sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
        <sonic-select autocomplete="sex" label="Gender" name="gender">
          <option value="" selected="selected">— Select —</option>
          <option value="prefer-not">Prefer not to say</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </sonic-select>
        <sonic-input autocomplete="bday" label="Date of birth" name="birth_date" type="date"></sonic-input>
        <sonic-divider></sonic-divider>
        <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
        <sonic-input
          autocomplete="email"
          label="Confirm email"
          name="email_confirmation"
          type="email"
        ></sonic-input>
        <sonic-input autocomplete="new-password" label="Password" name="password" type="password"></sonic-input>
        <sonic-input
          autocomplete="new-password"
          label="Confirm password"
          name="password_confirmation"
          type="password"
        ></sonic-input>
        <sonic-divider></sonic-divider>
        <sonic-textarea label="Special assistance" rows="5"></sonic-textarea>
        <sonic-switch>Add priority boarding</sonic-switch>
        <sonic-checkbox>Subscribe to newsletter</sonic-checkbox>
        <sonic-checkbox>
          I accept the
          <sonic-link href="#" class="underline">terms and conditions</sonic-link>
        </sonic-checkbox>
        <sonic-form-actions>
          <sonic-button type="success">Confirm passenger</sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>

Responsive columns

The column count depends on the host width, not the viewport: two columns above 440px, one below. When the layout holds exactly one short field, it stays single-column so the field does not sit in half an empty row.

<div class="grid gap-8">
      <sonic-form-layout style="max-width: 20rem">
        <sonic-divider align="left">Narrow host</sonic-divider>
        <sonic-input label="Email" name="email_narrow" type="email"></sonic-input>
        <sonic-input label="Confirm email" name="email_confirm_narrow" type="email"></sonic-input>
      </sonic-form-layout>
      <sonic-form-layout>
        <sonic-divider align="left">Wide host</sonic-divider>
        <sonic-input label="Email" name="email_wide" type="email"></sonic-input>
        <sonic-input label="Confirm email" name="email_confirm_wide" type="email"></sonic-input>
      </sonic-form-layout>
    </div>

Full-width children

Any child that is not a short field spans the full row: sonic-textarea · sonic-checkbox · sonic-switch · sonic-divider · sonic-form-actions and plain elements. Slotted dividers lose their vertical margin to match the grid gap, and sonic-submit uses display: contents so its button joins the grid directly.

<sonic-form-layout>
      <sonic-input label="Subject" name="subject"></sonic-input>
      <sonic-textarea label="Details" rows="4"></sonic-textarea>
      <sonic-form-actions>
        <sonic-button type="primary">Send</sonic-button>
      </sonic-form-actions>
    </sonic-form-layout>

Custom column wrapper

Add the class form-item-container to a wrapper element to keep it in the two-column flow like a short field.

<sonic-form-layout>
      <sonic-input label="From" name="from" placeholder="CDG"></sonic-input>
      <div class="form-item-container">
        <sonic-input label="To" name="to" placeholder="JFK"></sonic-input>
      </div>
    </sonic-form-layout>

API reference

No attributes.