## Regional Format (S—328)

Language and region settings with a live preview of how dates, times, numbers and money will look before you save.

- URL: https://sundaeui.dev/components/format-preview
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/format-preview.json`
- Tags: format, date, settings, i18n, region, locale

Pick a region, a 12 or 24 hour clock and the first day of the week. The preview uses Intl formatting, so it shows exactly what the browser will render.
A mini week row reflects the first-day choice; Save confirms the new locale.

### Usage

```tsx
import { FormatPreview } from '@/components/sundae/format-preview'

<FormatPreview />
```

### Props

- `locales` (`{ id: string; label: string; currency: string }[]`, required): Options.
- `onSave` (`(v) => void`): Called on save.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Account settings, onboarding for international products.

### When not to use

- Translating UI copy: that is a separate language setting.

### Accessibility

- Controls are native selects and radiogroups with labels.
- The preview is a description list announced on change.
- Reduced motion removes the movement and keeps every state change.