Import Error Row - Everyday Interface Patterns

A static import error row shows row 12, field Email, problem Missing @, and action Fix before import.

Program

Import error rows should give exact row, field, problem, and action text without validating, uploading, or importing anything.

import_error_row.html

Visuals: captured from real browser rendering

<section class="import-error" aria-labelledby="import-error-title">
  <h2 id="import-error-title">Import error</h2>
  <p class="status" role="status">Fix before import</p>
  <dl>
    <div><dt>Row</dt><dd>12</dd></div>
    <div><dt>Field</dt><dd>Email</dd></div>
    <div><dt>Problem</dt><dd>Missing @</dd></div>
    <div><dt>Action</dt><dd>Fix before import</dd></div>
  </dl>
  <button type="button">Review row</button>
  <p class="note">Static import error only; the button does not route, save, send, upload, import, parse, validate, or call a data service.</p>
</section>
<style>
  .import-error { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .import-error dl { display: grid; gap: 8px; margin: 0; }
  .import-error dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .import-error dt { color: #475569; }
  .import-error dd, .import-error p, .note { margin: 0; }
  .status { border: 1px solid #f59e0b; background: #fef3c7; padding: 8px; font-weight: 700; }
  .import-error button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the import error row.
The section is labelled by its visible heading.
Expose the action status.
The action is exposed as status text.
Show the row number.
The row number is exact pinned data.
Show the field name.
The field name is exact pinned data.
Show the exact problem.
The problem text is exact pinned data.
Check error row honesty.
Row, field, problem, action, and no live data service.

status surface Fix before import is visible and exposed as status text.

exact row problem Row 12, Email, and Missing @ are exact pinned error data.

no validation service The lesson should not imply file parsing, live validation, upload, import APIs, or database APIs.