Components

Time

Display a time following the time guidance for GOV.UK.

<time class="hods-time" datetime="22:37">
  10:37pm
</time>

<Time time="22:37" />
Props
Name Type Default Description
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

12-hour

Display the time in the 12 hour clock.

<time class="hods-time" datetime="22:37">
  10:37pm
</time>

<Time time="22:37" />

24-hour

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.

<time class="hods-time" datetime="22:37">22:37</time>

<Time time="22:37" clockType={24} />

ISO format date-time input

You can provide a full ISO formatted date-time) and display just the time as calculated from the timezone.

<time
  class="hods-time"
  datetime="2022-07-21T22:37:34.570Z"
>
  10:37pm
</time>

<Time time="2022-07-21T22:37:34.570Z" />

Accessibility

If your service uses this component, let us know of any insights you have on accessibility considerations.

Research

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.