Content Moderation Patterns

Report Reason

A static report reason panel shows Spam, Harassment, and Other radio choices, one selected option, a Continue button, and no moderation service.

Program

Report flows should make the selected reason visible before anything is submitted. This lesson uses pinned choice state only.

report_reason_choice.html
Visuals: captured from real browser rendering
<section class="report-reason" aria-labelledby="report-title">
  <h2 id="report-title">Report reason</h2>
  <fieldset>
    <legend>Choose one reason</legend>
    <label><input type="radio" name="reason" value="spam"> Spam</label>
    <label><input type="radio" name="reason" value="harassment" checked> Harassment</label>
    <label><input type="radio" name="reason" value="other"> Other</label>
  </fieldset>
  <button type="button">Continue</button>
  <p class="note">Static report choice only; no report submission or moderation backend runs.</p>
</section>
<style>
  .report-reason { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .report-reason fieldset { display: grid; gap: 8px; border: 1px solid #cbd5e1; }
  .report-reason button { justify-self: start; padding: 8px 12px; }
  .report-reason p, .note { margin: 0; }
  .note { color: #475569; }
</style>

  1. Label the report reason panel.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Group the report reasons.

    The fieldset and legend make the choices one named group.
    The fieldset and legend make the choices one named group.

  3. Show the spam option.

    The first radio gives a common report reason.
    The first radio gives a common report reason.

  4. Mark Harassment as selected.

    The checked radio pins Harassment as the selected reason.
    The checked radio pins Harassment as the selected reason.

  5. Show the next action.

    The button names the next step without submitting anything.
    The button names the next step without submitting anything.

  6. Check the report reason choice.

    The panel shows reasons, one selected choice, a button, and no submission or backend.
    The panel shows reasons, one selected choice, a button, and no submission or backend.
reason group The report reasons are one exclusive radio group.
selected reason The checked radio marks the pinned selected reason.
no submission The lesson should not imply a real report submission or moderation backend.