A timepicker allows users to pick a time from a popup.

Structure

A timepicker is a text field with a clock icon on the right. 

While FOLIO avoids using placeholders for text fields, timepickers are an exception to the rule.

The following placeholder shall be displayed: “h:mm A”.

Behavior

When users click on the timepicker, a time pop up shall appear.

When users pick a time, the pop up shall disappear.

The timepicker should have the selected time as well as a clear X icon in addition to the clock icon.

Related pages

A repeatable field allows users to enter multiple values for the same key.
A search field allows users to search for specific information
A select field allows users to select one option from a list of more than 10 items. 
A text area allows users to enter, read and edit text.
A text field allows users to enter, read and edit text.