Date range picker

A React component in Beamline's Form controls category.

A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.

Use it for

Dashboard and report ranges with presets like Last 30 days.

Not for

A single date (date-picker).

Anatomy

label (Field)
trigger (field frame: preset name in ink, range in ink-3, calendar icon at inline-end like every picker)
panel (m-overlay): presets (chosen = check at inline-end), one or two months, footer (days · range)
description / error (Field)

Variants

size: sm, md, lg
months: 1, 2, auto

States

empty
preset (checked in the list)
custom
half chosen (span follows the pointer)
open (trigger keeps the field focus edge)
invalid
disabled (--pui-opacity-disabled)

Keyboard

Tab between presets and the grid
calendar keys
Escape closes

Motion

The panel grows from the trigger. Opens out of its trigger (_shared/overlay.module.css, source morph): the layer starts as the trigger's own box, offset onto it, and grows; the side next to the trigger is there at once so the nearest rows read within the ruled 90 ms, the far side settles by ~200 ms, content fades in over 90 ms; it closes back into the trigger in 180 ms. Until it has grown the press that opened it cannot land on a row. Reduced motion: it appears.

Props

Prop	Type	Default	Description
`value / defaultValue / onChange`	`{ start: Date; end: Date }`	—
`presets`	`{ label, range(today) }[]`	`Today … Year to date`
`months`	`1 \| 2 \| "auto"`	`"auto"`
`minDate / maxDate`	`Date`	—
`size`	`"sm" \| "md" \| "lg"`	—	Height 32 / 36 / 40 px, as every field. Default md.
`classNames`	`DateRangePickerProps["classNames"]`	—	Classes for the documented visual parts; see visualContract.slots.
`style`	`CSSProperties`	—	Visual field wrapper styles, alongside className.
`ref`	`Ref<HTMLButtonElement>`	—	Native control, with internal focus and caret refs preserved.

Dependencies

@radix-ui/react-popover, lucide-react

Import

import { DateRangePicker, DEFAULT_PRESETS } from "@/components/date-range-picker/date-range-picker";

Get it

Date range picker is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent