Form

Overview

.form is a centered panel (max 328px) that stacks a heading, field rows, an optional checkbox row, and a full-width primary action. Default spacing: 24px padding, 48px between title and body, 16px between fields.

Prerequisites

• PimentCSS installed, Installation.
• Input fields, .label, .field, icons from Input fields.
• Checkbox, opt-in row via Checkboxes & switches.
• Buttons, primary submit from Buttons.

Structure

Wrap fields in .form__field so label-to-control gap (4px) and field width (280px) stay consistent. Checkbox uses .form__checkbox on the label for full-width alignment inside the body.

<form class="form" action="/contact" method="post">
  <h2 class="form__title">Contact us</h2>
  <div class="form__body">
    <div class="form__field">
      <label class="label" for="email">…</label>
      <div class="field">…</div>
    </div>
    <label class="checkbox form__checkbox">…</label>
  </div>
  <div class="form__actions"><button type="submit" class="btn btn--primary">Send</button></div>
</form>

Contact form example

Interactive demo combining text inputs, native select, radio group, textarea, validation error, checkbox, and submit. All controls use PimentCSS form patterns.

Field row

Each .form__field is a column: .label then .field (or .textarea). Icons and validation states come from the field component; the form only sets width and vertical gap.

<div class="form__field">
  <label class="label" for="topic"><span class="label__text">Topic</span></label>
  <div class="field">
    <input class="field__input focus-visible" id="topic" name="topic" type="text">
  </div>
</div>

Checkbox in the form

Add .form__checkbox on the checkbox label so it spans the body width and aligns with touch targets. Keep the native input first, then .checkbox__control, then text.

Actions

.form__actions stretches child buttons to 100% width. Pair with .btn--primary for the main submit.

Class reference

Customize (Sass)

1. 01

   Form spacing

   Override panel width and gaps before importing components.
   variables

   @use "pimentcss-design-system" with (
     $form-max-width: 22rem,
     $form-gap: 2.5rem,
     $form-body-gap: 1rem
   );

2. 02

   Rebuild CSS

   Run after editing _form.scss or tokens.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps