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
| 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. |
Date range picker with quick-select presets for common periods. Use for analytics dashboards, report filters, or any context where users frequently select standard time windows.
Date range input in all three status states: error, warning, and success. Use to surface booking conflicts, flag high-demand periods, or confirm an available range.