All components (204)

Quick range

Choice · QuickRange

What it is and when to use it

The date shortcuts of a panel (Today, Last 7 days, This month…) and, next to them, the field for a custom range. Pressing a shortcut fills in the range; choosing by hand a range that matches a shortcut selects it automatically, and if none matches they all stay unselected, which is the honest thing to do.

When to use it

The period of a report, of a list of orders or of a sales chart.
shortcuts chooses which ones appear and in what order: today, yesterday, week, seven, month, thirty, quarter (last 90 days) and year. By default, today, 7 days, this month and 30 days.
"Last 7 days" includes today: it is today and the six previous days.
The range comes out in onChange as { start, end }, each date a { year, month, day } (the month from 1 to 12), or null. With value it is controlled from outside. withoutCalendar leaves only the shortcuts.

When not to

A date range in a form, without shortcuts: DateRangePicker.
A single date: DatePicker.
Changing the scale of a chart (day, week, month) without specific dates: SegmentedGroup.

Keyboard: the shortcuts are a radio group: a single Tab, and the arrow keys move and select at the same time. The custom range is a DateRangePicker: each end is typed with the keyboard without opening anything.

Accessibility: the shortcuts are a radiogroup called "Period: shortcuts" (the label and "shortcuts"); the date field carries the label as is. label is required. If the shortcuts do not fit, their row scrolls sideways instead of overflowing the box.

States and motion: the shortcuts bring those of SegmentedGroup (the fill of the selected one slides from one to another) and the field, those of the fields. disabled turns off both at the same time (data-disabled on the root).

Sizes: sm, md (the default) and lg: the shortcuts and the date box measure the same (30, 36 or 44 px) so they sit in a row without steps.

Context: the language of LocaleProvider (or AmsetProvider) decides how dates are written and on which day "This week" starts; without a provider, es-ES.

Fine-tuning: --amset-range-fast-slot (between the shortcuts and the dates: 8, 12 or 16 px depending on the size). The shortcuts are a SegmentedGroup (--amset-segmented-*) and the range, a DateRangePicker (--amset-field-*).

What it looks like

TodayLast 7 daysThis monthLast 90 days

Report period

10012026

10152026

From 1/10/2026 to the 15/10/2026.

<QuickRange
  label="Report period"
  shortcuts={['today', 'seven', 'month', 'quarter']}
  value={periodo}
  onChange={setPeriodo}
/>

Props

Import it with import { QuickRange } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Required: it names the whole group and the date field.
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	Disables the shortcuts and the date field at the same time.
`onChange`	`(range: Range \| null) => void`	—
`shortcuts`	`readonly RangeShortcut[]`	—
`size`	`"sm" \| "md" \| "lg"`	The shortcuts and the date box are the same height, so they go in a row without steps: `sm` (30 px), `md` (36 px, the default) or `lg` (44 px).
`value`	`Range \| null`	—
`withoutCalendar`	`boolean`	Removes the date field and leaves only the shortcuts.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: