Use Case Onboarding Block for React

Edit USES: each has an id, a title, a hint for the line under the name and opens, the phrase the sentence completes (“We will open {opens}.”). Each id has a drawing in Drawing, a few greyscale boxes in a 64 by 40 pixel space; add one there for a new tile and keep six tiles so the grid has no gap.

A tile is a whole box with a drawing in it, which a plain label around a hidden radio input does best: the browser gives it a single tab stop, arrow keys that move and pick, and a name and state for screen readers, and the same markup works on every target. The picked tile's box and darker drawing come from the radio's checked state in CSS.

It is the page's one polite status: it asks you to pick before there is a pick, names the board after it, and says “Saved in this demo” after Continue. It is held at two lines on wide screens and three on a phone, so the buttons below never move.

Continue stays in the tab order and looks quiet until a tile is picked; pressing it says “Pick a use to continue.” in a line under the grid that is always reserved, and puts focus on the grid so the arrow keys work at once.

Everything: Continue says it saved in this demo and nothing leaves the page. In your app send the picked id to your server where submit says so and open the board its response names. The mapping from a tile to a board belongs to your product; the typed opens lines are only the preview.

Two tiles across in three rows, each tile showing its drawing and name (the line stays for screen readers), and Continue pinned to the foot of the screen with Skip for now beside it.