Set Reminder 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, and the page around the preview keeps working. The Remind me 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 ReminderFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

They are one choice shown two ways. A chip sets the day and the time: from the typed 08:40, In 1 hour is today at 09:45 (reminders go off on the quarter hour), This evening is today at 18:00, Tomorrow 9:00 is Saturday and Next Monday is 12 October. Changing the day or the time by hand lights Pick a date unless the pair happens to match a chip, and Pick a date opens the calendar. The sentence always reads whatever is chosen, with "today" and "tomorrow" in words and other days by name, and it is said once, 600 ms after you stop changing things, and only when it changes.

A missing name, no way to be reminded (push, email or both) and a time that has already passed today at the typed 08:40. The reason appears in the line under the sentence, reserved so nothing moves, and focus goes to the field it is about. Once you change anything the reason clears.

Everything. No notification will fire: Set reminder keeps the reminder in this page's state, puts a bell tag with the day on the first drawn task and says so in the polite status. The button then reads Update reminder. In your app send the name, the day, the time, the repeat and the ways to your server, which owns the schedule and sends push and email; the times here are in the person's own zone, with no conversion.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the name, and Escape, Cancel and the close button return focus to Remind me. The chips are one group you move through with the arrow keys, the day button says whether the calendar is open (aria-expanded), the calendar is a real grid, and choosing a day returns focus to the button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the form scrolling above them, name first. The chips go two to a row, the day and the time stack, and the sentence has room for three lines so it never jumps. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.