A printed checkbox list with boxes big enough to tick by hand

Why this block is harder than it looks

The boxes are drawn at the size they look right on screen, which is about half the size a person needs to tick with a pen on a clipboard. The second failure is alignment: a box aligned to the middle of a multi-line item drifts away from the first line, so a column of boxes beside a column of items of varying length is not a column at all. And a form filled in on site is filled in with the paper on a wall or a knee, so anything that requires precision is a design failure rather than a user error.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Draw boxes at least 5mm square. On a form that will be completed with a pen, the box has to accept a tick made without care.
• Align the box to the first line of the item with align-items: start, so a column of boxes stays a column regardless of item length.
• Give the rows generous vertical spacing, at least 3mm between boxes, so an adjacent box is not ticked by accident.
• Use a border rather than a background fill, so the box survives print settings that drop backgrounds.
• Where an item can be not applicable, print a second box rather than expecting the reader to write N/A. Two boxes is unambiguous; a blank box is not.
• Keep the whole item and its box together with break-inside: avoid, and never let a heading sit alone at the foot of a page above its items.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<ul class="checks">
  <li>
    <span class="box" aria-hidden="true"></span>
    <span class="item">Isolation confirmed and locked off at the distribution board,
      with the key held by the person in charge of the work.</span>
  </li>
  <li>
    <span class="box" aria-hidden="true"></span>
    <span class="item">Access route clear.</span>
  </li>
</ul>

<style>
  .checks { list-style: none; margin: 0; padding: 0; }
  .checks li {
    display: flex;
    align-items: start;            /* box stays with the first line */
    gap: 4mm;
    break-inside: avoid;
    padding: 2mm 0;                /* clearance between boxes */
    font-size: 9.5pt;
    line-height: 1.4;
  }
  .checks .box {
    flex: 0 0 auto;
    width: 5mm; height: 5mm;       /* sized for a pen, not for type */
    margin-top: 0.6mm;             /* optical alignment to the cap height */
    border: 0.75pt solid currentColor;
  }
  .checks .item { flex: 1 1 auto; }
</style>

What breaks when it is built the obvious way

Centring the box against the item with align-items: center. It looks correct while every item is one line and drifts to the middle of the block as soon as one item wraps, at which point the boxes no longer form a column and the form looks hand-assembled.

How to prove it survived pagination

Print the form and tick every box with a ballpoint, holding the paper against a wall rather than on a desk. If any tick strays outside its box or into the one below, the boxes are too small or too close. Then add a four-line item and confirm its box is still level with the first line.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The inspection checklist template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.