Content
Date format
Always display the date in the approved format: Jun 15, 2023.
For date range, Learn more about our dates, time and duration formats. NEVER use numeric dates.
Copy Guidelines
Placeholders
Date range pickers don’t have placeholder copy, as the range field is never empty and so placeholder copy is not necessary.
Date pickers have “Choose a date” as placeholder, and there’s no need for format guidelines since the picker emerges preventing formatting errors.
Hints
Use the hint to give additional information or context to enter information.
Note: aim to have a clear enough label so that no helper text is needed.
- 2 sentences max length
- 2 lines of wrapping max
- Keep it short and concise
- Use contractions where it applies to make it sound closer and more conversational
- If 1 sentence, don’t end in period. If 2 sentences, end in period.
Errors
- 2 sentences max length
- 2 lines of wrapping max
- Keep it short, concise, and empathetic. Give users a way to fix this.
- If 1 sentence, don’t end in period. If 2 sentences, end in period.
Date range length & end date
Types
Date Picker
Web
- Typically does not have a default selection
- Text field CAN be typed into
- Can be used with or without the calendar
Native app
- Typically does not have a default selection
Date Range
Web
- Will always have a default selection, which means the text input can not be “cleared”
- Text field CAN NOT be typed into
- Presets: maximum of 5 + custom options
Native app
- Will always have a default selection, which means the text input can not be “cleared”
Best Practices
Disabled dates
Use disabled dates to communicate report limitations. In the example below, the experience of the user in the Basic plan is limited. Express those limitation via disabled dates and by adding a description to “custom.”
Do
Don’t
Start of the week
The first day of a week in the calendar should reflect the user’s “start of the week” settings. This is commonly Sunday or Monday.
Keyboard navigation
When a user tabs to a date picker, the following behavior is expected. Date range is similar, except the text input is not interactive.
Native app - mobile
iOS
Use the following native components:
Android
Use the following native components:
Resources
(internal only)