Entering Dates
In order to provide an accessible user experience, you should design and develop date picking experiences to use an Input rather than a Date Picker.
Calendar Picker vs. Input
Date Pickers
Date Pickers are most useful for scheduling applications, where the user is selecting an unknown date with the aid of calendar context. They primarily benefit sighted users using a pointing device or touchscreen and most importantly are not fully accessible.
Despite what many articles claim, Date Pickers cannot be made accessible either. To learn more about why you should avoid using a Date Picker we highly recommend you read the article:
Maybe You Don't Need a Date Picker.
Text Input
The text-based Input is accessible by default and is easier use in most cases where the user needs to enter a known date which applies to most applications and what we recommend using in Pando.
Please note we are specifically using the type="text"
input element and not the type="date"
. This is because the date version of an input is (shockingly) not accessible.
Text Input for Date Entry
In Pando, we recommend using the text-based Input combined with the useAutoFormatDate hook for displaying a way to enter a date.
In this example, we are creating a DateInput component that can be used anywhere in your application.
function DateInput() {
const formatOptions = useAutoFormatDate()
return (
<FormControlProvider>
<Label htmlFor="date">Birthdate</Label>
<Input
describedBy="date:help"
startIcon={CalendarIcon}
{...formatOptions}
/>
<FieldMessage id="date:help">
Enter a date in the format of {formatOptions.placeholder}.
</FieldMessage>
</FormControlProvider>
)
}