Language and Region 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 header's Language and region 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 RegionFields component and share the block's state, so what you set in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

One fixed moment, Friday 9 October 2026 at 14:30 UTC, and three numbers: a date, a time, 1,234,567.89, an amount of 1,234.50 in the region's currency, 26% and the week's day names in order. All of it comes from Intl.DateTimeFormat and Intl.NumberFormat with the tag your choices make, such as de-DE, so what you see is what the browser would print. Output differs a little between engines and versions, so the preview is worked out after the page mounts and shows dashes until then. A language and region pair the browser has no data for falls back to the language alone.

Everything. The language, region, first weekday and clock live in the block's state; Save changes the rows on the drawn page and says so in a polite status message, and nothing is stored or sent. In your app save the four values to the user's profile in save, build the locale tag from the first two, and pass the weekday and clock to your date components. No time zone is picked here: keep that in its own control.

It filters the eight languages by their native name or their English name as you type, so "deu" and "german" both find Deutsch. When nothing matches, the list area shows a line that names what you typed, and it keeps its height so the dialog never jumps. The chosen language stays chosen while it is filtered out; clearing the field brings it back.

Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape, Cancel and the close button return focus to the header button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus back on the header button. Tab moves between the two tabs, the search field and the list, and the arrow keys walk the languages and the first-day and clock buttons.

The copy shown on load docks to the foot of the page as a bottom sheet with Save pinned at the bottom; the tabs, the preview and the fields scroll above it. The preview keeps two columns so it stays short. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.