Calendar
A date selection component supporting single dates and date ranges. Includes keyboard navigation, screen reader support, and multi-brand theming.
| Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
Sun |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Usage
The Calendar component enables date selection in forms, filters, and booking flows. It supports single date selection and date range selection.
States
| Preview | State | Description |
|---|
|
Default |
Neutral day cell. |
|
Hover |
Visual feedback on pointer hover. |
|
Focus |
Visible focus ring for keyboard navigation. |
|
Selected |
Active selected date. |
|
Range |
Start, middle, and end cells for date range selection. |
|
Outside month |
Date from the previous or next month shown for context. |
|
Disabled |
Date outside the selectable range. |
Keyboard interactions
| Key | Interaction |
|---|
| ArrowLeft or ArrowRight |
Moves focus one day backward or forward. |
| ArrowUp or ArrowDown |
Moves focus one week backward or forward. |
| Home or End |
Moves focus to the first or last day in the current week. |
| PageUp or PageDown |
Moves focus to the previous or next month. |
| Enter or Space |
Selects the focused date. |
Accessibility
- Uses
role="grid" for the day grid
- Each cell has an
aria-label with the full date (e.g. "15 July 2026")
- Focus management follows roving tabindex pattern
- Minimum 44×44px touch target per cell
- Contrast validated for all states and modes
Anatomy
1
3
4
| Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
Sun |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Options
Table of options
| Property | Values | Default |
|---|
| container | true / false | true |
| selectedDate | day number / none | — |
| rangeStart | day number / none | — |
| rangeEnd | day number / none | — |
| todayDate | day number / none | 1 |
| state | default / hover / focus | default |
| disabled | true / false | false |
Variants
| Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
Sun |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
Sun |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
Sun |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
Sun |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Tokens
| Token | Purpose |
|---|
--calendar-container-padding | Container padding |
--calendar-container-border-radius | Container border radius |
--calendar-container-border-color | Container border color |
--calendar-container-border-size | Container border width |
--calendar-container-background | Container background |
--calendar-container-gap | Vertical gap between calendar sections |
--calendar-header-gap | Gap between header controls |
--calendar-weekday-text-color | Weekday label color |
--calendar-weekday-font-size | Weekday label font size |
--calendar-weekday-height | Weekday label row height |
--calendar-cell-gap | Spacing around day cells |
--calendar-cell-min-size | Minimum day cell touch target |
--calendar-cell-border-radius | Day cell radius |
--calendar-cell-text-color-default | Default day cell text |
--calendar-cell-text-color-active | Selected day cell text |
--calendar-cell-text-color-disabled | Disabled and outside-month text |
--calendar-cell-background-active | Selected day cell background |
--calendar-cell-background-hover | Hover state |
--calendar-cell-range-border-color | Range and today indicator border color |
--calendar-cell-range-border-size | Range and today indicator border width |
--calendar-cell-range-border-radius | Range start/end radius |