Time input - smbc-digital/patterns GitHub Wiki
Contents
– User needs – How it works – Status – Error messages – Accessibility statement – Examples – Research into this pattern – Discuss this pattern
User needs
This pattern is to help users enter a specific time in hours and minutes; it's commonly used to book appointments and record events.
How it works
It is good to note that this is an experimental design and we'll use the findings for future iterations. The pattern is an open text box time entry that presents the input using a 12-hour format, by hours and minutes with radio buttons for providing the am/pm option.
Status
Working progress - experimental
Error messages
Use a validation message to identify when the user has failed to provide the information in the format you are expecting. To help the user, you should show the user an error message that allows them to fix the problem.
For styling follow GOV.UK
| Label | Error state | Validation messages |
|---|---|---|
| Time | If the text field is blank | Enter start time |
| Time | If invalid time | Enter a valid time |
| Time | If am/pm is blank | You must choose AM or PM |
Accessibility statement
This pattern has a rating of AA.
Accessibility testing is the process of testing the pattern for ease of use with specific disabilities. Please see our accessibility guidelines.
Improvements
To make it AAA, we need to:
- Add...
Examples
Research into this pattern
For the development of this pattern, we looked closely at: GOV.UK