Form Layout 1.2.2

Combine VelinStyle's grid system and utility classes to build any form layout — from stacked fields to multi-column and inline forms. Deutsch: Formular-Layout

Maturity: Form layout patterns using .velin-field + the VelinStyle grid (.velin-row / .velin-md-col-*) are stable in 1.2.0.

When to use

Stack fields with .velin-field for the default vertical rhythm.
Multi-column address/name groups with .velin-row, gutters (.velin-g-3), and responsive columns (.velin-md-col-6).
Short inline filters or login rows with flex utilities — keep labels associated.

When not

Do not copy Bootstrap .row / .col-md-* class names — use VelinStyle’s .velin-row / .velin-md-col-*.
Do not sacrifice label association for a compact inline layout.
Very long wizards may need a stepper pattern more than a dense grid.

Stacked (default)

Fields inside a <form> stack vertically by default with .velin-field spacing.

<form>
  <div class="velin-field">
    <label class="velin-label" for="name">Full name</label>
    <input type="text" class="velin-input" id="name">
  </div>
  <div class="velin-field">
    <label class="velin-label" for="email">Email</label>
    <input type="email" class="velin-input" id="email">
  </div>
  <button type="submit" class="velin-btn velin-btn--primary">Submit</button>
</form>

Grid layout

Use .velin-row and responsive .velin-md-col-* classes to create multi-column form layouts.

First name

Last name

Address

City

State

Zip

<form>
  <div class="velin-row velin-g-3">
    <div class="velin-md-col-6">
      <div class="velin-field">
        <label class="velin-label">First name</label>
        <input type="text" class="velin-input">
      </div>
    </div>
    <div class="velin-md-col-6">
      <div class="velin-field">
        <label class="velin-label">Last name</label>
        <input type="text" class="velin-input">
      </div>
    </div>
    <div class="velin-col-12">
      <button type="submit" class="velin-btn velin-btn--primary">Submit</button>
    </div>
  </div>
</form>

Inline form

Use flex utilities to place controls side-by-side on a single row.

<form class="velin-flex velin-flex--wrap velin-flex--gap-2 velin-flex--items-end">
  <div class="velin-field" style="flex:1;min-width:200px">
    <label class="velin-label">Email</label>
    <input type="email" class="velin-input">
  </div>
  <div class="velin-field" style="flex:1;min-width:200px">
    <label class="velin-label">Password</label>
    <input type="password" class="velin-input">
  </div>
  <button type="submit" class="velin-btn velin-btn--primary">Sign in</button>
</form>

Reading order should match visual order — avoid rearranging columns with CSS that breaks DOM order.
Inline forms still need a label per control (visible or .velin-sr-only).
On submit, place <velin-form-summary> at the top of the form so focus lands on the error list first.

Grid · Gutters · Stacks
Forms overview · Validation