Form Layout (Collections)

Layout and spacing patterns for arranging multiple fields. These classes do not style labels or controllers and must be combined with Form Field and Form Inputs.

Vertical Layout Grid Layout Section Grouping Row Layout Actions Row

1. Vertical Form Layout

Default stacked layout using .form-layout for vertical rhythm between fields.

1.1 Standard Layout Preview

Standard Context

For use on normal page surfaces (content areas, cards, dialogs)

Optional but recommended for booking updates

1.2 Standard Layout HTML Snippet

HTML 
<form>
  <div class="form-layout">
    <div class="field">
      <label class="field__label field__label--required">Full Name</label>
      <div class="field__control">
        <input type="text" class="input" placeholder="Jane Doe" required>
      </div>
    </div>
    <div class="field">
      <label class="field__label field__label--required">Email Address</label>
      <div class="field__control">
        <input type="email" class="input" placeholder="you@example.com" required>
      </div>
    </div>
    <div class="field">
      <label class="field__label">Phone Number</label>
      <div class="field__control">
        <input type="tel" class="input" placeholder="+48 123 456 789">
      </div>
      <p class="field__hint">Optional but recommended</p>
    </div>
  </div>

  <div class="form-actions mt-6">
    <div class="form-actions__primary">
      <button type="submit" class="btn btn--primary">Submit</button>
    </div>
    <div class="form-actions__secondary">
      <button type="button" class="btn btn--secondary">Cancel</button>
    </div>
  </div>
</form>

1.3 Glassy Layout Preview

Glassy Context

For use on dark overlays and hero sections

Optional but recommended for booking updates

1.4 Glassy Layout HTML Snippet

HTML 
<form>
  <div class="form-layout">
    <div class="field field--glass">
      <label class="field__label field__label--required">Full Name</label>
      <div class="field__control">
        <input type="text" class="input input--glass" placeholder="Jane Doe" required>
      </div>
    </div>
    <div class="field field--glass">
      <label class="field__label field__label--required">Email Address</label>
      <div class="field__control">
        <input type="email" class="input input--glass" placeholder="you@example.com" required>
      </div>
    </div>
    <div class="field field--glass">
      <label class="field__label">Phone Number</label>
      <div class="field__control">
        <input type="tel" class="input input--glass" placeholder="+48 123 456 789">
      </div>
      <p class="field__hint">Optional but recommended</p>
    </div>
  </div>

  <div class="form-actions mt-6">
    <div class="form-actions__primary">
      <button type="submit" class="btn btn--primary">Submit</button>
    </div>
    <div class="form-actions__secondary">
      <button type="button" class="btn btn--secondary-glass">Cancel</button>
    </div>
  </div>
</form>

2. Grid Form Layout

Responsive multi-column layout using .form-grid with .form-grid__full for full-width fields.

2.1 Standard Layout Preview

Standard Context

For use on normal page surfaces (content areas, cards, dialogs)

2.2 Standard Layout HTML Snippet

HTML 
<div class="form-grid">
  <div class="field">
    <label class="field__label field__label--required">First Name</label>
    <div class="field__control">
      <input type="text" class="input" placeholder="Jane" required>
    </div>
  </div>
  <div class="field">
    <label class="field__label field__label--required">Last Name</label>
    <div class="field__control">
      <input type="text" class="input" placeholder="Doe" required>
    </div>
  </div>
  <div class="field form-grid__full">
    <label class="field__label field__label--required">Email Address</label>
    <div class="field__control">
      <input type="email" class="input" placeholder="you@example.com" required>
    </div>
  </div>
</div>

2.3 Glassy Layout Preview

Glassy Context

For use on dark overlays and hero sections

2.4 Glassy Layout HTML Snippet

HTML 
<div class="form-grid">
  <div class="field field--glass">
    <label class="field__label field__label--required">First Name</label>
    <div class="field__control">
      <input type="text" class="input input--glass" placeholder="Jane" required>
    </div>
  </div>
  <div class="field field--glass">
    <label class="field__label field__label--required">Last Name</label>
    <div class="field__control">
      <input type="text" class="input input--glass" placeholder="Doe" required>
    </div>
  </div>
  <div class="field field--glass form-grid__full">
    <label class="field__label field__label--required">Email Address</label>
    <div class="field__control">
      <input type="email" class="input input--glass" placeholder="you@example.com" required>
    </div>
  </div>
</div>

3. Sectioned Form

Use .form-section to group related fields with a divider and title.

3.1 Standard Layout Preview

Standard Context

For use on normal page surfaces (content areas, cards, dialogs)

Guest Details

Stay Details

3.2 Standard Layout HTML Snippet

HTML 
<div class="form-section">
  <h3 class="t-h5 mb-4">Guest Details</h3>
  <div class="form-layout">
    <div class="field">
      <label class="field__label field__label--required">Full Name</label>
      <div class="field__control">
        <input type="text" class="input" placeholder="Jane Doe" required>
      </div>
    </div>
  </div>
</div>

3.3 Glassy Layout Preview

Glassy Context

For use on dark overlays and hero sections

Guest Details

Stay Details

3.4 Glassy Layout HTML Snippet

HTML 
<div class="form-section">
  <h3 class="t-h5 mb-4">Guest Details</h3>
  <div class="form-layout">
    <div class="field field--glass">
      <label class="field__label field__label--required">Full Name</label>
      <div class="field__control">
        <input type="text" class="input input--glass" placeholder="Jane Doe" required>
      </div>
    </div>
  </div>
</div>

4. Form Row Layout

Use .form-row for simple horizontal grouping of two fields. It stacks on mobile.

4.1 Standard Layout Preview

Standard Context

For use on normal page surfaces (content areas, cards, dialogs)

4.2 Standard Layout HTML Snippet

HTML 
<div class="form-layout">
  <div class="form-row">
    <div class="field">
      <label class="field__label">City</label>
      <div class="field__control">
        <input type="text" class="input" placeholder="Warsaw">
      </div>
    </div>
    <div class="field">
      <label class="field__label">Postal Code</label>
      <div class="field__control">
        <input type="text" class="input" placeholder="00-001">
      </div>
    </div>
  </div>
</div>

4.3 Glassy Layout Preview

Glassy Context

For use on dark overlays and hero sections

4.4 Glassy Layout HTML Snippet

HTML 
<div class="form-layout">
  <div class="form-row">
    <div class="field field--glass">
      <label class="field__label">City</label>
      <div class="field__control">
        <input type="text" class="input input--glass" placeholder="Warsaw">
      </div>
    </div>
    <div class="field field--glass">
      <label class="field__label">Postal Code</label>
      <div class="field__control">
        <input type="text" class="input input--glass" placeholder="00-001">
      </div>
    </div>
  </div>
</div>

Usage Guidelines

Do

  • Use .form-layout as the default vertical container
  • Use .form-grid for multi-column layouts
  • Use .form-grid__full for full-width fields
  • Use .form-section to group related fields
  • Use .form-row for two-field horizontal groups
  • Use DS typography classes for section titles

Don't

  • Don't style labels or controls in layout CSS
  • Don't nest .form-layout inside .form-grid
  • Don't use .form-row for 3+ fields
  • Don't add inline font sizing to section titles
  • Don't use Tailwind grid utilities inside snippets
  • Don't skip the Form Field wrapper inside layouts

CSS Location

Form Layout patterns are defined in:

/assets/css/form-layout.css

Includes: vertical layout, multi-column grids, horizontal rows, section grouping, and responsive spacing rules. Layout only.

Related Documentation

Form Field (Wrapper)

Label + control wrapper pattern

Form Inputs (Controllers)

Input/select/textarea elements

Spacing

Spacing tokens and rhythm