error={date >newDate()?false:"Date must be greater than today."}
/>
</Form>
)}
</State>
Accessibility
The user should be able to choose a date by typing into the input or by selecting a date from the calendar dropdown. The user should be able to use either method.
Keyboard Support
When focus is on the input, press space to open and escape to close the calendar.
Use tab / shift + tab to change focus from the calendar and input.
When focus is on the calendar, use the arrow keys to traverse through dates and enter to select a date.
Content Guidelines
Most of the content guidelines from Forms applies to the Date Picker.
Use a label for all input fields
A label is a short, meaningful description that clearly indicates what the user is expected to enter. Labels should be 1 to 3 words and written in title case. Labels should primarily be nouns. Avoid using labels as CTAs. A label is not inline help and shouldn’t be used to provide instruction.
Follow capitalization rules
Input labels should be written in title case.
Show hints, formatting, and requirements
Inline help should explain a feature or the outcome of the actions the user is about to take.
The description should adapt to the situation and context. The guidance could be focused on what is needed, or it could describe how to enter it.
Do
Don't
Best Practices
Date pickers should:
Use smart defaults
Not be used to enter a date that is many years in the future or the past