Trigger Event Wall Grid Integration Block for React

The events that are on live in one array of ids. The line is built from it: how many are on, out of how many. It sits in a polite status region that is in the page from the start, so a screen reader hears the new count after each change. Nothing is saved or sent: choices stay in the page, as the sentence says.

The cell is a label around a checkbox, so the whole cell is the target, and the checkbox is named by the event name and described by the step it ticks. A ticked box fills with the foreground colour and the cell adds no fill, so the page's one primary colour stays on its main action elsewhere; the words "Ticks" and "Would tick" and the step's weight carry the state. The two states use the same line count, so a change never moves the grid.

$pageview and $autocapture are names of events PostHog captures itself, which is why they begin with a dollar sign; the others (signed_up, invited_teammate and the rest) are made up, the way your own app names its events. The counts are example data typed in the file. Replace TRIGGERS with the events your product reads.

It wraps after an underscore, using an invisible break character after each one, so published_first_page never pushes the cell wider. The break is invisible but it is in the text, so trim it if you copy a name out of a narrow cell.

The block names PostHog in text and ships no PostHog logo, colour or wordmark. PostHog's tile is a neutral lettermark, Ph in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it.

Below lg the wall is two cells across and each cell's text wraps. In a right-to-left layout the cells and the checkboxes flip while event names keep their left-to-right order. The hover tint is a short transition that is off with reduced motion, and the header fades up once on load; with reduced motion it simply appears.