shadcn.io is not affiliated with official shadcn/ui
Invitation-code gate Contact Block for Solid
A wedding reply in a centred frame that stays shut until a six-character invitation code matches, then asks who's coming and what they'll eat.
Installation
Overview
A reply for Calista and Teodor's wedding on Saturday, 12 June 2027, built for Solid with Ark UI. The card sits in a Frame. An Input OTP of six characters gates the rest: the hint reads ODT-202, and those six characters unlock the reply. A wrong complete code shows an error. Once it matches, a Segment Group asks Yes or No. Yes adds a Number Input for one to four guests, and each guest gets a name and a meal Radio Group (Garden, Coast, Hearth). No asks for a name. An email is always required once attending is chosen. The reply button is on the card before the code matches. It's built from Field, Input, Input OTP, Segment Group, Number Input, Radio Group, Frame, Guides, Shine Button and Button.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation. Replace that timer in submit with your own call. A yes reply carries the guest names and meals and the email; a no reply carries the name and the email. The block does not promise a saved seat beyond the confirmation on the page.
What is the invitation code?
The card prints ODT-202. The field is six characters, ODT202, with a mark between the two groups of three; the hyphen is not a character you type. The hint says "Try ODT-202". A complete code that isn't those six characters shows "That code doesn't match the card." A match unlocks the reply and moves focus to Attending. Changing the code so it no longer matches locks the reply again. Sending before a match focuses the code and shows the error. The button stays available either way.
How do the guest fields work?
After a match, Attending is Yes or No and has to be chosen. Yes shows a guest count from 1 to 4. That many name fields appear, the first labelled "Your name", and each has its own meal group so the choices don't collide. Lowering the count hides the extra guests and keeps what was typed if you raise it again. No hides the guest fields and asks for one name. Email is required in both cases.
How does the form check what's typed?
The form has noValidate. Before the code matches, submit only checks the code. After it matches, problems checks Attending, then either every shown guest's name and meal or the single name, and an email with an @ and a domain. Each problem appears under its field with an icon, and focus moves to the first one. Typing, or choosing a meal or Yes or No, clears that message.
What does the confirmation say?
A yes reply thanks the first guest by first name and lists every guest with the meal in parentheses. A no reply says we'll miss them and repeats the name. It's a status region that takes focus, and "Send another reply" locks the card again and puts focus on the heading. It does not invent a table number.