Calendar
A date grid for selecting a day, several days or a range.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add calendarnpm packages installed: react-day-picker.
import { Calendar } from "@/components/ui/calendar";Default
Range
Multiple
With Disabled Dates
With Dropdown Navigation
Without Outside Days
A real grid with roving focus: arrows move by day, Page Up/Down by month, Home/End to the ends of a week. Selection is announced through aria-selected, and the month caption is a live region so moving between months is announced. Give the calendar an accessible name when more than one is on the page.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes