Form

Forms provide structured layouts for collecting user input.

Usage

Wrap form fields in a .Form element.

<form class="Form">
  <div class="Form-Field">
    <label class="Form-Label" for="name">Full Name</label>
    <input id="name" type="text" class="Input" />
    <span class="Form-Help">Enter your legal name.</span>
  </div>
  <div class="Form-Actions">
    <button class="Button primary" type="submit">Save</button>
  </div>
</form>

Layouts

• Default: Single-column vertical stacking.
• .grid: Two-column layout for wider forms.
• .inline: Flexible wrapping row layout.

<form class="Form grid">…</form>
<form class="Form inline">…</form>

Use .full on a .Form-Field to make it span both columns in a grid layout.

<div class="Form-Field full">…</div>

Validation States

Apply data-valid or data-invalid directly on the input element.

<input type="text" class="Input" data-valid />
<input type="text" class="Input" data-invalid />
<span class="Form-Error">This field is required.</span>

Required Fields

Add .required to .Form-Label to display a required indicator.

<label class="Form-Label required" for="email">Email</label>

Input Group

Use .InputGroup to combine an input with an inline button or label.

<div class="InputGroup">
  <input type="text" class="Input" placeholder="Search…" />
  <button class="Button primary">Go</button>
</div>

Checkbox and Radio

Use the .Form-Check wrapper for checkbox and radio inputs.

<label class="Form-Check">
  <input type="checkbox" />
  Enable notifications
</label>

<label class="Form-Check">
  <input type="radio" name="role" value="admin" />
  Admin
</label>

Structure

• .Form-Field: Wraps a label, input, and help/error text.
• .Form-Label: Label for the field.
• .Form-Help: Optional helper text shown below the input.
• .Form-Error: Validation error message shown below the input.
• .Form-Actions: Container for submit/cancel buttons, aligned right.
• .Form-Group: Groups related fields together visually.
• .Input: Standalone input element (text, select, textarea).
• .InputGroup: Combines an input with an inline button or prefix.
• .Form-Check: Wraps a checkbox or radio input with its label.