Browse CSS

Form Layout

Build responsive forms with shared fields and layout utilities.

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.

A responsive profile form

<form class="stack max-w-form">
  <fieldset class="form-section stack">
    <legend>
      Profile Details
    </legend>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-md">
      <div class="field">
        <label for="css-profile-first">
          First Name
        </label>
        <input
          class="input"
          id="css-profile-first"
          name="given-name"
          autocomplete="given-name"
          placeholder="Alex"
        >
      </div>
      <div class="field">
        <label for="css-profile-last">
          Last Name
        </label>
        <input
          class="input"
          id="css-profile-last"
          name="family-name"
          autocomplete="family-name"
          placeholder="Morgan"
        >
      </div>
    </div>
    <div class="field">
      <label for="css-profile-email">
        Email
      </label>
      <input
        class="input"
        id="css-profile-email"
        name="email"
        type="email"
        autocomplete="email"
        placeholder="[email protected]"
      >
    </div>
  </fieldset>
</form>