Age-Aware Sign-Up Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The Join button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same RegisterFields component and share the block's state, so what you typed in the copy is there in the real one, except the date segments, which keep their own value and start empty. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From the date, against AS_OF, a fixed day written once at the top of the file, so the demo reads the same whenever it is opened. MIN_AGE (13) and ADULT_AGE (16) are constants too, because the ages that matter differ between countries and products. A date in the future asks for a real one. Under 13 the Create account button is off and the line under the date says "You need to be 13 to join". In your app work the age out on the server from its own clock, and treat the browser's answer as a convenience.

The line under the date says "We'll ask them to say yes before your account opens", a field for a parent or guardian's email unfolds, and the button reads Ask my parent. Here the account then waits and the header says so; nothing is sent. In your app send the parent a link to confirm, keep the account pending until they do, and let the young person know where it stands.

No account is created and no email goes out. A finished form only sets a local result: the header's Join button becomes the new member's name with their initials, or "Waiting for a parent" for the younger path, with a Start over button to try another date. In your app post the fields in join, show the server's reasons under the matching fields, and keep the dialog open on a refusal.

Because people know it by heart and a calendar would make them page back decades. The Date Input is segments: type the digits, and Tab moves between month, day and year. It is the same part on every target, with no popup, so nothing floats over the dialog.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the name field and stays inside until it closes, and Escape, Cancel and the close button all return focus to the Join button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Each problem takes focus in turn, and a polite status message reports the age line and each result. On a phone the rail is gone and the form becomes one column in a bottom sheet.