# 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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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.

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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-code>
  <template>
    <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>
  </template>
</sonic-code>

## API reference

No attributes.

| Slot | Description |
|------|-------------|
| *(default)* | Fields and blocks in visual order; short fields and `form-item-container` share rows, everything else spans the full width |