Components
Calendar
A date field built on react-day-picker for selecting a single day, multiple days, or a date range, with keyboard navigation and dropdown month and year controls.
Basic usage
Use mode="single" for a one-day picker. The calendar manages its own selection state when left uncontrolled.
Range selection
Set mode="range" and render two months with numberOfMonths for booking and reporting date pickers.
Multiple days
With mode="multiple" users can toggle any number of individual, non-contiguous days.
Dropdown caption
Pass captionLayout="dropdown" to swap the static month label for month and year dropdowns — handy for jumping across distant dates like a birthdate.
Disabled dates
The disabled prop accepts a matcher — here every day before June 17 is non-selectable and dimmed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'single' | 'multiple' | 'range' | 'single' | Selection behavior — a single day, an array of days, or a contiguous date range. |
selected | Date | Date[] | DateRange | — | Controlled selected value. Pair with onSelect; omit for an uncontrolled calendar. |
onSelect | (value) => void | — | Called when the selection changes. Shape matches the active mode. |
defaultMonth | Date | today | The month displayed on first render when uncontrolled. |
numberOfMonths | number | 1 | How many months to render side by side. Useful for range pickers. |
captionLayout | 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label' | Renders the month/year as a static label or as navigable dropdowns. |
buttonVariant | Button variant | 'ghost' | Variant applied to the previous/next navigation buttons. |
showOutsideDays | boolean | true | Show days from adjacent months that fill the leading and trailing weeks. |
disabled | Matcher | Matcher[] | — | Days that cannot be selected — a date, range, predicate, or matcher object. |
className | string | — | Additional Tailwind classes merged onto the calendar root. |
classNames | Partial<ClassNames> | — | Override individual element class names (day, weekday, nav, etc.). |
All other react-day-picker props are forwarded to the underlying DayPicker.
Accessibility
- The grid follows the WAI-ARIA date picker pattern — days are reachable with arrow keys, and Enter or Space selects the focused day.
- Previous and next navigation render as real
<button>elements with accessible labels, and disabled days exposearia-disabledso they are skipped. - The selected day is marked with
aria-selectedand today is announced viaaria-current="date"rather than color alone. - Focused days receive a visible
focus-visiblering using the brand ring token, and focus is automatically moved to the focused day when navigating months.