Inputs · §10.3
Calendar
The date grid behind the pickers.
Code
<Calendar mode="single" onSelect={setDate} selected={date} />Accessibility
- Arrow keys move by day, Page Up/Down by month; today is marked.
Usage
Do
- 40 px day cells.
Don't
- Not for a date of birth.
Platforms
- Web
- apps/web/components/ui/calendar.tsx
- iOS
- SwiftUI DatePicker(.graphical)
- Android
- Compose DatePicker