Action Row

Bordered row for settings, account, and similar pages: title + hint on the left, control on the right.

This is not Inline fields (af-field-inline is a form label next to a stretching input). Pair with Nav Pills for section nav on a settings page.

Markup

Keep div.af-action-row when the control is its own interactive (select, button). For a switch, prefer label.af-action-row so the whole row toggles and picks up hover styles.

Email alerts When someone mentions you

Session timeout

Sign out after inactivity

Two-factor authentication

Require a code at sign-in

<div class="af-action-row-group">
  <label class="af-action-row">
    <span class="af-action-row__copy">
      <span class="af-action-row__title">Email alerts</span>
      <span class="af-action-row__hint">When someone mentions you</span>
    </span>
    <span class="af-action-row__control">
      <input type="checkbox" role="switch" />
    </span>
  </label>

  <div class="af-action-row">
    <div class="af-action-row__copy">
      <h3 class="af-action-row__title">Session timeout</h3>
      <p class="af-action-row__hint">Sign out after inactivity</p>
    </div>
    <div class="af-action-row__control">
      <select class="af-select" aria-label="Session timeout" style="width: auto;">
        <option>15 minutes</option>
        <option>1 hour</option>
      </select>
    </div>
  </div>

  <div class="af-action-row">
    <div class="af-action-row__copy">
      <h3 class="af-action-row__title">Two-factor authentication</h3>
      <p class="af-action-row__hint">Require a code at sign-in</p>
    </div>
    <div class="af-action-row__control">
      <button type="button" class="af-btn af-is-sm af-is-outline">Enable</button>
    </div>
  </div>
</div>

label.af-action-row gets hover (surface + stronger border) and a focus-within border automatically. Headings and paragraphs inside .af-action-row pick up title/hint styles without extra classes — use af-action-row__title / af-action-row__hint spans inside a label.

When to use `af-field-inline` instead

Pattern	Layout	Typical control
`af-action-row`	Title + hint vs control, bordered row	Switch, compact select, ghost button
`af-field`	Label above a full-width control	Text input, textarea
`af-field-inline`	Label beside a stretching control	Text input on one line

Accessibility

Prefer label.af-action-row for switches so the visible title names the control
Otherwise the control needs an accessible name: aria-label, or associate a heading via aria-labelledby
Switches: role="switch" (and aria-checked when you manage state in JS)
Don’t nest interactive controls inside another interactive element — keep button/select rows as div.af-action-row