Anatomy
The Date Field consists of six primary elements that work together to allow users to enter a date.
- Label
- DateField Indicator
- Field
- Placeholder
- Hint on expected format
- Value
Options
The Date Field supports range selection and multiple size configurations to accommodate various date entry scenarios.
Range
Enables date range selection
Sizes
| Size | Height |
|---|
| Small | 32px |
| Medium (Default) | 40px |
| Large | 48px |
Behavior
The Date Field responds to user interaction with distinct visual states and calendar popover interactions.
Visual States
Default
Disabled
Read-only
Error
Open
Tab order
| Order | Element |
|---|
| Initial | field |
| 1 | Calendar: if there is selected date, selected date, otherwise today’s date |
| 2 | Today Button |
| 3 | Previous month Button |
| 4 | Next month Button |
Usage Guidelines
Use the Date Field when users need to enter a date as string or with a calendar popover.
When to Use
Single Date Selection: Opt for a single date picker when users need to select a specific date, such as a birthdate or card expiration date. The calendar can be helpful to see the relationship between dates.
Date Range Selection: Use a date range picker when users need to select a start and end date, often for activities spanning multiple days. It provides a clear visual representation of the time span and allows for efficient selection of both dates simultaneously.
How to Use
Read-only Date Field
Use a read-only Date Field when users can review but not alter the value of a Date Field. Unlike disabled Date Fields, read-only Date Fields still allow users to focus the input, copy and paste text, are accessible via screen readers, and maintain good contrast for readability.
Disabled
Use a disabled Date Field when users cannot edit the form field.
Hints should help users determine the expected format. Do not use the placeholder to show the expected format.
Labels and Help
For guidance on labels and help text, check out our Labels and Help pattern.
Date Field Validation
For form validation guidance, check out our Form Errors and Validation pattern.
Content
Content within the Date Field should clearly communicate the expected date format and provide helpful hints.
Keyboard Interaction
Users can navigate the Date Field using standard keyboard controls.
| Key | Description |
|---|
| page up | focused previous month same day |
| page down | focused next month same day |
| shift + page up | focused previous year same month and day |
| shift + page down | focused next year same month and day |
Accessibility
Anvil provides most of the accessibility needs for Date Field out of the box, and only needs some additional considerations for library users. Last modified on January 23, 2026
