shadcn.io is not affiliated with official shadcn/ui
Conflict Check Enquiry Contact Block for Solid
A new-matter enquiry for a law firm on a card in card: other parties as chips for a conflict check, urgency, a voicemail switch and an engagement acknowledgement signed on a pad or typed.
Installation
Overview
A law-firm enquiry for Solid with Ark UI. A muted shell with + marks on its corners opens with a privilege notice: until the firm has cleared a conflict, nothing written here is protected. A raised panel inside starts with the conflict check, the other parties as chips in a tags input, beside how urgent the matter is (routine, soon or urgent, each with its own line) and a voicemail switch. Under them, your name, email and an optional phone, a few lines on the matter, and an engagement acknowledgement: a box to tick, and a signature drawn on a pad or your full name typed. The one Shine Button sends it. It's built from Tags Input, Segment Group, Switch, Checkbox, Signature Pad, Field, Input, Textarea, Guides, Shine Button and Button. Example only, not legal advice.
FAQ
Where does the enquiry go?
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.
How do the parties work?
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".
How can someone who can't draw sign?
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.
What does the voicemail switch check?
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.
Why do the urgency hints not move the card?
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.
How does it fit on a phone?
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.