Display a time following the time guidance for GOV.UK.
|id||string||'id' attribute to place on the base HTML element|
|classBlock||string||Block name override in BEM style classes applied to all elements|
|classModifiers||other||BEM style modifiers to apply to the base HTML element|
|className||string||Extra classes to apply to the base HTML element|
|clockType||enum||Displays time as a 12 or 24 hour clock|
|noWrap||boolean||Whether to not wrap the time in a time element|
|time||string||The time in ISO format|
When to use this component
This component is a standard code implementation for displaying easy to read times to users from:
- a time such as 22:37
- ISO format such as 2022-07-21T22:37:34.570Z
How to use this component
Display the time in the 12 hour clock.
You should use the 12-hour clock. For example, 5:30pm and 2:30am.
If you have evidence that your internal users regularly use the 24-hour and find it easier, then you may choose to use the 24-hour clock to display time. For example, 17:30 and 02:30. We need more evidence and research to validate this.
ISO format date-time input
You can provide a full ISO formatted date-time) and display just the time as calculated from the timezone.
If your service uses this component, let us know of any insights you have on accessibility considerations.
If your service uses this component, let us know of any research findings.
Help improve this component
This component needs improving. We need evidence about:
- what services use this component
- when to use the 24-hour clock
- displaying time zones
To contribute, add your thoughts and research findings to our display date and time GitHub discussion, or follow our contribute guidance.