Astryx Design System

Date Range Input@astryxdesign/core v0.0.15 · DateRangeInput

Usage

DateRangeInput lets users select a start and end date from a dual-month calendar popover. Use it for filtering data by time period, report generation, analytics dashboards, and booking flows.

ts
import {DateRangeInput} from '@astryxdesign/core/DateRangeInput'

Best practices

Guidance	Practices
Do	Use presets for common ranges like "Last 7 days" to speed up selection.
Do	Use min/max to constrain selectable dates to valid ranges.
Do	Keep hasClear enabled (default) so users can reset the filter.
Do	Provide clear labels and descriptions so users understand what the range controls.
Don't	Use DateRangeInput when only a single date is needed; use DateInput instead.
Don't	Hide the label without surrounding context that makes the purpose obvious.