InputTimeSelect

Interface of InputTimeSelect
🏗 Coming Soon

InputTimeSelect provides a Select-based dropdown UI for picking a 24-hour time value. This is an alternative to InputTime, which provides an HTML5-standard time picking experience.

The default implementation provides a dropdown list of times in 15-minute increments, formatted in for a 12-hour clock.

Intervals

You can modify the list to increment time in 5, 10, 15, or 30 minute intervals.

5-minute

10-minute

15-minute

30-minute

12- or 24-hour formatting

Depending on readability preference, the time picker can format the labels in either 12- or 24-hour time. Regardless of label formatting, this component returns a 24-hour time formatted string when changed.

12-hour

14:00

24-hour

14:00

Controlled Component

Consistent with all other inputs, InputTimeSelect accepts value and onChange props for use in a controlled form setting.

  • value accepts a 24-hour formatted time string (e.g. 15:45)
  • onChange returns a 24-hour time string
14:00

DefaultValue

If you don't want to control the form value externally, but still want to listen for changes, you can still pass in an initial defaultValue.