Form Elements
Date Picker
Date Picker component allows users to select a single date or a range of dates using a calendar interface. It ensures accurate and consistent date selection across workflows.
Examples
Closed
Error
Date is required
Disabled
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Keyboard navigable calendar grid
- Arrow keys to navigate dates
- Enter/Space to select date
- ESC to close calendar
- Clear focus indicators
- Proper ARIA labels and roles
- Screen reader announcements for selected date
When to use this component
✓Do's
- •Users need to select a specific date from a calendar
- •Date of birth, application dates, or appointment scheduling
- •You need to enforce valid date formats (DD/MM/YYYY)
- •Date range selection for filtering or reporting
✗Don'ts
- •Use a Select dropdown when users only need to choose a month and year.
- •Use a text input when users are entering dates that are far in the past (e.g., historical records).
- •Use a Date Picker with a Time Picker when users need to select both a date and time.
- •Use preset date range buttons for relative dates (e.g., "Last 7 days").
Do's and Don'ts
✓ Do's
Format: DD/MM/YYYY
Provide a clear label, required marker, and helper text showing the expected date format.
✗ Don'ts
Don't display a date picker without a label or format hint, users won't know what date to enter or what format is expected.