You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs

Time Picker

If Time Picker's field is in focus, a dropdown to be shown with a list of availiable options to pick from. Options are filtered by step prop, but any intermediate value is still allowed to pick by typing.

Closest value, based on user's entry, to be highlighted in a dropdown. Dropdown behavior may be disabled with disableDropdown prop.

Time Range

Minimal and maximal time to be picked might be set with min and max props. Default time range is 12:00 АM to 23:59 PM.

Step

Specified in minutes. Default value is 30. Should not exceed 1440 (24 hours).

Step is used to generate dropdown options. User still can type in and choose any value in between min and max.

When autoRounding is enabled, user is only allowd to choose values from options, generated by step prop.

Auto Rounding

Controls rounding behavior of a Time Picker:

  • if false, ignores step prop, making it possible to type in any intermediate value, e.g. 02:53 PM even if step=60,
  • if true, user are only allowed to choose option out of step-based row, e.g. value became ‘rounded’ to the closest value.

By default autoRounding is disabled.

AM vs PM Default

When a user enters an ambiguous time (e.g. 12), the Time Picker can either read this as 12 AM or 12 PM. By default, it resolves as AM. A PM default may also be used when most user contexts use PM values.

Format

By default, Time Picker uses 12-hour clock convention. It is common in US and few other countries. In order to switch to 24-hour clock set format prop to hh:mm.

Options and States

Time Picker can have a placeholder, a default value, a label (required and optional as well), a description, error and disabled states.

Time zone and Now button


Content Guidance

Use a label for all input fields

A label is a short, meaningful description that clearly indicates what the user is expected to enter. Labels should be 1 to 3 words and written in title case. Labels should primarily be nouns. Avoid using labels as CTAs. A label is not inline help and shouldn’t be used to provide instruction.


Follow capitalization rules

Input labels should be written in title case.



Avoid using placeholder text

Placeholder text has several accessibility issues:

  • Text has low contrast which makes the text hard to read
  • Text disappears as soon as the user starts typing
  • Can’t accommodate additional context due to limited space
  • Unreliable for screen readers

Use inline help to provide hints, formatting, and requirements.

Placeholders in Form Fields Are Harmful (Nielsen Norman Group)


Show hints, formatting, and requirements

Inline help should explain a feature or the outcome of the actions the user is about to take.

The description should adapt to the situation and context. The guidance could be focused on what is needed, or it could describe how to enter it.

  • An overall description of the input field
  • Hints for what kind of information needs to be input
  • Specific formatting examples or requirements

Do not repeat the label in order to prompt someone to interact with it.

Don’t add inline help when unneeded or solely to make it match other inputs that have inline help text.

Use sentence case, and only include period if more than one sentence is used.

Follow the inline help content guidelines.

Format: HH:MM AM
Enter a time

Accessibility

The user should be able to choose a time by typing into the input or by selecting an option from the dropdown. The user should be able to use either method.

Keyboard Support

  • When focus is on the input, press down to open and escape to close the dropdown.
  • When focus is on the input, use tab / shift + tab to perform autocomplete based on entry and move focus away from Time Picker.
  • When focus is on the dropdown, use the arrow keys up / down or shift + tab / tab to traverse through options and enter to select a date.

Best Practices

Time Picker should:

  • Use smart defaults for step and autoRounding
  • Have clear description and label to be comfortable for end user

Components

Patterns

  • Form design pattern for how related controls are ordered.

Importing

import { TimePicker } from '@servicetitan/design-system';