Time Picker

Time Picker component enables users to enter a time through text input or list of options from the dropdown menu.

Import#

import { TimePicker } from '@volue/wave-react';

Examples#

Basic#

TimePicker is modelled around the Combobox pattern, so a user can enter a time either through text input or options menu with a list of predefined values.

You can pass defaultValue for uncontrolled TimePicker.

Controlled#

You can easily make the TimePicker controlled, by passing your own state to value prop. onValueChange handler is called when the time value changes, allowing you to sync state.

With Form Field#

Use TimePicker with Form Field in order to enhance layout with a clear label. Optionally, you may want to connect helper text and/or validation feedback message to the TimePicker.

When using TimePicker without FormField.Label, be mindful to provide aria-label instead.

Validation#

Since TimePicker allows user to enter a time through a text input, it has to handle invalid user input, i.e. not meeting the expected time format.

By default, TimePicker attempts to parse the provided input into a HH:MM format, as shown in the placeholder. If that fails, the text field will highlight itself in red to provide visual cue that it needs correction. You can subscribe to the onError callback which is triggered when the input error changes and use the FormField.FeedbackMessage to communicate a detailed error message to the user.

onError callback provides a reason for the error which can be either an incorrect format.

Disabled state#

Pass isDisabled prop to the accompanying FormField and it will cascade down to the Timepicker.

You can also pass isDisabled prop directly to DatePicker.

Sizes#

As with other types of input controls, TimePicker comes in two sizes: medium and small. By default, it uses medium size.

Step#

By default, values in the options menu are created from 24 hours timespan with "steps" of 15 minute intervals. The list of values can be modified by changing the step parameter.

Note that the maximum value of step can be 60 minutes.

No custom value#

By default, TimePicker accepts values that are not listed in the options list, assuming the format is correct. To prevent that and limit allowed values only to the pre-determined list of options, set allowsCustomValue prop to false.

Date and time picker#

You can combine TimePicker with Date Picker component to allow user to select both date and time.

Use layout components like Flex or Grid to control arrangement of the fields.

In the example below useDateFormatter hook exported by Wave is used to display selected date and time. It returns memoized instance of Intl.DateTimeFormat under the hood.

If you're already using a library such as date-fns, you could alternatively use it's format utility.

Accessibility features#

Timepicker provides deep keyboard interactions.
Necessary ARIA roles and attributes are provided to give directions to a screen reader user.

API Reference#

TimePicker#

Prop	Type	Default
`defaultValue`	`string`	No default value
`value`	`string`	No default value
`onValueChange`	`function`	No default value
`size`	`enum`	`"medium"`
`step`	`number`	`15`
`locale`	`string \| Locale`	No default value
`isDisabled`	`boolean`	No default value
`isRequired`	`boolean`	No default value
`allowsCustomValue`	`boolean`	`true`
`onError`	`function`	No default value