Skip to content

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

<div class="af-action-row-group">
  <div class="af-action-row">
    <div class="af-action-row__copy">
      <h3 class="af-action-row__title">Email alerts</h3>
      <p class="af-action-row__hint">When someone mentions you</p>
    </div>
    <div class="af-action-row__control">
      <input type="checkbox" role="switch" aria-label="Email alerts" />
    </div>
  </div>
  <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>

Headings and paragraphs inside .af-action-row pick up title/hint styles without extra classes. Prefer af-action-row__title / af-action-row__hint when the markup isn’t an h* + p.

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

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