Date Range Picker
Pick a start and an end date.
Period
11242026
1272026
Usage
import { DateRangePicker } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Report periods and multi-day closures.
When not to use
- A single date. Use Date Picker.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Always visible above the control. |
helperText | string | - | Help text below the control. |
errorMessage | string | - | Shown when isInvalid; replaces the helper text. |
variant | 'raised' | 'flat' | 'raised' | Raised on the canvas, flat inside a white card. |
size | 'sm' | 'md' | 'lg' | 'md' | md on desktop, lg on touch. |
isInvalid, isDisabled, isRequired | boolean | false | |
value, defaultValue, onChange | { start, end } | - | |
minValue, maxValue | DateValue | - |
Accessibility
- The selected range is read in full.