Conflict Check Enquiry 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 intake system: details holds the parties, urgency, voicemail choice, contact details, matter and signed name, and the pad hands you its image from onDrawEnd through getDataUrl("image/png") (the demo only counts strokes). Say plainly on your own page what is and isn't confidential at this stage.

Type a name and press Enter or a comma to turn it into a chip; pasting a comma-separated list adds each name. A name is kept once (ignoring case), up to six, and leaving the field adds what you typed. Each chip has a remove button, and at least one party is required. The count under the field reads "2 of 6 added".

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 acknowledgement box is separate and never ticked for you.

It is off until you turn it on. Turning it on without a phone number is a problem under the phone field ("Add a phone number, or switch voicemail off"), and a phone number needs digits, spaces and the usual + ( ) . - only. The phone field is otherwise optional.

The three hints sit in one grid cell, the chosen one visible and the others hidden, so the cell takes the tallest. A polite live region reads the new hint when the choice changes.

Below lg everything stacks into one column inside the card: parties, urgency and voicemail, your details, the matter, then the acknowledgement with the pad and the typed name under it. The pad keeps its 160 pixel height, the button goes full width, and the notice wraps. The email keeps its order in a right-to-left layout.