Check
An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
Kit parts
Ticket punch
A checkbox drawn as a conductor’s ticket punch: each option is a paper ticket with a serial, and checking squeezes steel jaws shut on its box and leaves a shaped hole, with the paper chip falling away. A real checkbox underneath carries the value and the keyboard.
Anatomy
The hole is a real cut. The punch is built once per group from a few spans and placed by measuring its box against the group, then moved with a transform; it is two layers that move as one, the handle, hinge and upper jaw over the paper and the lower jaw beneath it, so each ticket sits between the jaws; it presses down as the lower jaw climbs, so the two faces meet on the box, and the back of the head shortens with them. Close, hole, chip and open are Web Animations API steps. The steel is the paper’s own light mixed with its ink, so it stays metal in every finish. No images.
Variants
- A lone ticket
- Diamond die
- A ticket that cannot be punched
States
- Rest
- Punched
- Half
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| data-punch | attribute | The shape the die cuts, drawn by punchPath(). |
| data-indeterminate | attribute | Sets the native indeterminate state at build: the jaws rest half closed on the box, with no hole. |
| checked · disabled | attribute | A disabled ticket is greyed and the punch will not travel to it. |
| change | event | Fires on the input. The script never sets the box itself. |
| Space | keyboard | Toggles the focused ticket, as any checkbox. |
| punchPath(shape, size) | function | Pure: the closed SVG path of the hole in a box size pixels square. |
| punchMask(shape, size) | function | Pure: the same shape as a CSS mask image. |
| punchShape(name) | function | Pure: a die the part knows, else star. |
Usage notes
Press a ticket: the punch moves to its box, the jaws close and a star is cut. Press it again: a fresh ticket with the next serial slides in.
Accessibility
- A disabled ticket is greyed and out of the tab order, and the punch stays away from it.
- Under reduced motion the hole appears at once with no chip and no slide; the state never depends on the movement.
Related parts
Choice card
A radio or a check set as a large plate carrying a name, a sentence and a price. The plate is a big key on a skirt with a small check key in its corner; the chosen one goes down below the panel and its corner key latches. Under it is the real radio or checkbox, so a group is a native radio group and posts with the form.
Switch
On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.