Form layout

Usage

Use the Field component’s form-section class on a fieldset for borderless groups and consistent legend spacing. Combine it with layout utilities for responsive forms.

<fieldset class="form-section stack">
  <legend>Your details</legend>
  <div class="grid items-start">
    <div class="field">
      <label for="name">Name (required)</label>
      <input class="input" id="name" name="name" required>
    </div>
    <div class="field">
      <label for="email">Email (required)</label>
      <input class="input" id="email" name="email" type="email" required>
    </div>
  </div>
</fieldset>

Try the complete form example. Its layout uses classes, with no inline styles or per-form validation script.