Forms¶

Basic structure¶

Wrap forms in .form for consistent styling. Use semantic elements:

<form class="form">
  <label>
    Label text
    <input type="text" placeholder="Placeholder" />
  </label>
  <footer>
    <button class="gradient">Save</button>
    <button type="button">Cancel</button>
  </footer>
</form>

Sections¶

Group related fields with <fieldset> and <legend>:

Connection settings Host Port

<fieldset>
  <legend>Connection settings</legend>
  <label>
    Host
    <input type="text" placeholder="localhost" />
  </label>
  <label>
    Port
    <input type="number" placeholder="5432" />
  </label>
</fieldset>

Layout¶

Use .row for inline field groups. Children get equal width by default.

First name Last name

<div class="row">
  <label>
    First name
    <input type="text" />
  </label>
  <label>
    Last name
    <input type="text" />
  </label>
</div>

Sizing modifiers¶

Class	Purpose
`.narrow`	Fixed 140px width
`.shrink`	Natural width, no flex

Host Port

<div class="row">
  <label>
    Host
    <input type="text" />
  </label>
  <label class="narrow">
    Port
    <input type="number" />
  </label>
</div>

Actions¶

Use <footer> for the button row at the end of a form:

<form class="form">
  <!-- fields -->
  <footer>
    <button class="gradient">Save</button>
    <button type="button">Cancel</button>
  </footer>
</form>

Inline errors¶

Use .alert.error after the form actions for validation feedback:

Passphrases do not match.

<form class="form">
  <!-- fields -->
  <footer>
    <button class="gradient">Submit</button>
  </footer>
  <div class="alert error" role="alert">Passphrases do not match.</div>
</form>