Permissions Matrix Testimonial Contact Block for React

No. It stays in the visitor's browser tab and the circle is a preview of their own file; nothing is sent, and the block ships no photographs. To make it real, send file where submit waits, and check the type and size again on your server, because the drop zone's limits (one image, 4 MB) are only a courtesy. A wrong file is refused with a polite line saying which file and why.

It is a real table with row and column headers, and each box is a checkbox named after its row and column, such as "Name on Social". Ticking is free, but the form checks three rules on submit: at least one Quote box is ticked, a Name or Photo box only appears on a row whose Quote is ticked, and a photo is only added if some row allows it. The message says which rows to fix and focus lands on the first box that needs attention.

A live count ("Quote on 2 of 4 places, name on 1, photo on 0") that a screen reader hears when a box changes. The confirmation reads the same choices back in words, one line per row ("Website, with your name").

Nowhere yet. The submit waits 800 milliseconds as a stand-in for a request, then shows the confirmation, which says plainly that it was saved in the demo only. Replace the timer in submit with your call: details, picked (keys like website:quote) and file hold everything.

They are drawn in the foreground colour so the Shine Button stays the only primary control on the page. Change NEUTRAL_CHECK if you want them to follow the primary colour.

The band stacks: header, the quote and photo, then the matrix under its own rule, then the button. The table keeps its four columns at 320 pixels because it is fixed-width and its labels are short. Nothing scrolls sideways.