Todos los componentes (204)

Rango rápido

Elección · QuickRange

Qué es y cuándo usarlo

Los atajos de fechas de un panel (Hoy, Últimos 7 días, Este mes…) y, al lado, el campo para un rango a medida. Pulsar un atajo rellena el rango; elegir a mano un rango que coincide con un atajo lo marca solo, y si no coincide ninguno se quedan todos sin marcar, que es lo honesto.

Cuándo usarlo

El periodo de un informe, de un listado de pedidos o de un gráfico de ventas.
shortcuts elige cuáles salen y en qué orden: today, yesterday, week, seven, month, thirty, quarter (últimos 90 días) y year. Por defecto, hoy, 7 días, este mes y 30 días.
«Últimos 7 días» incluye hoy: son hoy y los seis anteriores.
El rango sale en onChange como { start, end }, cada fecha un { year, month, day } (el mes de 1 a 12), o null. Con value se controla desde fuera. withoutCalendar deja solo los atajos.

Cuándo no

Un rango de fechas en un formulario, sin atajos: DateRangePicker.
Una sola fecha: DatePicker.
Cambiar la escala de un gráfico (día, semana, mes) sin fechas concretas: SegmentedGroup.

Teclado: los atajos son un grupo de radio: un solo Tab, y las flechas mueven y eligen a la vez. El rango a medida es un DateRangePicker: cada extremo se escribe con el teclado sin abrir nada.

Accesibilidad: los atajos son un radiogroup que se llama «Periodo: atajos» (la etiqueta y «atajos»); el campo de fechas lleva la etiqueta tal cual. label es obligatoria. Si los atajos no caben, su fila se desplaza de lado en vez de salirse de la caja.

Estados y movimiento: los atajos traen los del SegmentedGroup (el relleno de la elegida se desliza de uno a otro) y el campo, los de los campos. disabled apaga los dos a la vez (data-disabled en la raíz).

Tamaños: sm, md (por defecto) y lg: los atajos y la caja de fechas miden lo mismo (30, 36 o 44 px) para ir en fila sin escalones.

Contexto: el idioma de LocaleProvider (o de AmsetProvider) decide cómo se escriben las fechas y en qué día empieza «Esta semana»; sin proveedor, es-ES.

Aspecto fino: --amset-range-fast-slot (entre los atajos y las fechas: 8, 12 o 16 px según el tamaño). Los atajos son un SegmentedGroup (--amset-segmented-*) y el rango, un DateRangePicker (--amset-field-*).

Cómo se ve

HoyÚltimos 7 díasEste mesÚltimos 90 días

Periodo del informe

01102026

15102026

Del 1/10/2026 al 15/10/2026.

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

Props

Se importa con import { QuickRange } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: nombra el grupo entero y el campo de fechas.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Deshabilita los atajos y el campo de fechas a la vez.
`onChange`	`(range: Range \| null) => void`	—
`shortcuts`	`readonly RangeShortcut[]`	—
`size`	`"sm" \| "md" \| "lg"`	Los atajos y la caja de fechas miden lo mismo, para que vayan en fila sin escalones: `sm` (30 px), `md` (36 px, por defecto) o `lg` (44 px).
`value`	`Range \| null`	—
`withoutCalendar`	`boolean`	Quita el campo de fechas y deja solo los atajos.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: