Supplier Application Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your supplier system: details holds the company, tax ID, type, certifications, contact and signed name, and the pad hands you its image from onDrawEnd through getDataUrl("image/png") (the demo only counts strokes).

Every change keeps digits only, takes the first nine and puts a dash after the second, so typing 123456789 shows 12-3456789 and letters never appear. The field asks for a numeric keyboard on phones, keeps its order in a right-to-left layout, and is checked on submit and when you leave it: nine digits, in that shape. The number in the example is not a real one.

Type a name and press Enter or a comma, or press one of the quick-add buttons: they are toggles, so pressing a certification that is already a chip removes it. Up to eight are kept. Quick-add buttons report whether they are pressed, and the field is optional.

The pad takes a pointer or a finger, and it is labelled as a signature pad with a Clear button. Keyboard and screen reader users, and anyone who would rather not draw, type their full name in the field beside it: that field is required whenever the pad is empty, and a drawn signature makes typing optional. The acceptance box is separate and never ticked for you.

The label above it names the select's button for screen readers, and focus can land on it when the choice is missing. The trigger takes the id, and the label points to it with htmlFor.

Below lg the parts stack in reading order: the header, the application, then the code of conduct under a rule with + marks. Fields go one per row, the quick-add buttons wrap, the button goes full width, and the pad keeps its 160 pixel height. At 320 pixels nothing scrolls sideways.