Skip to main content
UI Patterns

Date Picker

Notoriously inaccessible. Must support keyboard navigation (arrow keys for days, page up/down for months). Always provide a text input alternative. Native <input type='date'> is often the best option.

In plain terms

Calendar pickers are notoriously hard to use without a mouse — always offer a plain text date box as a backup.

Why this matters

Calendar widgets are one of the most common keyboard and screen-reader traps on the web. Users who can't operate the grid have no way to enter a date — unless you give them a plain text field.

How to detect

Quick check

Try the picker with the keyboard only: can you move by day and month and select a date? With a screen reader, is the chosen date announced? Check there's a typeable text input as a fallback.