Time Field

Overview

Time allows the user to to input time in a format which can be stored accurately.

The time component supports both 12hr and 24hr formats, which can be seen in examples below. Unlike our Date Time field component Time only returns a consistently formatted 24hr time string. If you need to return an ISO 8601 datetime then make use of the Date Time field component instead.

When to use

• Use Time if the input is recording a specific time in hours, minutes, seconds, hours and minutes, minutes and seconds.

When not to use

• Do not use Time if it is purely a number value which needs to be entered, e.g. ‘11’.
• Do not use Time if you are recording the duration of time something has taken.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Time Field

Label (optional)

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Error

string

Array<string>

Errors to display for the input.

Value 

Error Hidden

boolean

false

Only display the red border but not the error text.

Toggle Prop

Format

TimeFormat

type TimeFormat = typeof timeFormats[number];

The desired time format

 

1224

Help Text

string

Array<string>

The help text to display for the input.

Value 

Label

string

Required

The label to be shown above the input.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

Required

boolean

false

If the field is required

Toggle Prop

Time Modes

What time is it? (optional)

Default 24h time format

What time is it? (optional)

AMPM

What time is it? (optional)

AMPM

Figma Library

You can find the component in our MedKit Figma library.