Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA radio list of named date ranges such as last 7 days, this quarter or year to date, computed from today and the locale's first weekday.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it beside a calendar or a field to jump to common periods. Presets are computed from today (or today) and the first weekday of the locale, so "This week" starts on Monday in Berlin and Sunday in New York.
Custom presets (a fiscal year, a sprint) take a ready range.
| Prop | Type | Default | Description |
|---|---|---|---|
| presets | (PresetId | { id; label; range })[] | 7 common presets | Built-in ids such as last-30-days, this-quarter, or custom presets. |
| value | { from: string; to: string } | null | - | Current range; the equal preset is checked. |
| onSelect | (range: DateRange, id: string) => void | - | Called when a preset is chosen. |
| today | string | today | Reference day; pass a fixed date in tests. |
| firstDay | number | from locale | First weekday for week presets. |
| showRange | boolean | false | Show the dates under each name. |
| orientation | vertical | horizontal | vertical | Layout and arrow keys. |
| labels | Partial<Record<PresetId, string>> | English | Translate preset names. |
Built-in ids: today, yesterday, last-7-days, last-14-days, last-30-days, last-90-days, this-week, last-week, this-month, last-month, this-quarter, last-quarter, this-year, last-year, year-to-date, last-12-months. presetRange(id, today, firstDay) from date-time-core returns the same ranges for use in code.
| Keys | Action |
|---|---|
| Up / Down, Left / Right | Moves to the next or previous preset and selects it |
| Tab | Moves into and out of the list; one tab stop |
| Space / Enter | Selects the focused preset |
radiogroup of radio buttons with one tab stop (roving tabindex); the preset that equals the current range is aria-checked.showRange each button also shows its dates, which are part of its accessible name.