Date picker
A date picker helps users select a single date.
Types
Date picker
Date inputs use the browser’s built-in date picker, where available, otherwise they fall back to a text input.
HTML code snippet
<input type="date" class="a-text-input" placeholder="mm/dd/yyyy">
Date picker (full-width)
Date inputs may use the a-text-input--full
modifier to fill their available space.
HTML code snippet
<input type="date" class="a-text-input a-text-input--full" placeholder="mm/dd/yyyy">
Accessibility
Inputs should always be paired with a label
for accessibility reasons.
Users of screen readers use the tab key to move focus from one form control to another. Make sure that tab focus order reflects the way you would like users to navigate through the form. Consider whether tabs should move a user down or across the page.