New! TimeInput is in beta, the API is subject to change. Feel free to test it out and let us know what you think! This component is available on thestable branch.

TimeInput

a control to input a time value

Storybook

Github

Props

defaultValue

The default time value, uninitialized.

string

"14:30:00"

disabled

Whether the TimeInput is disabled.

boolean

true

false

format

Whether to use a 12-hour or 24-hour time format. If not specified, defaults to whichever convention the browser's locale uses.

string

"12"

"24"

id

The DOM id attribute value to use for the underlying element.

string

"id"

messages

Custom messages for TimeInput. Used for internationalization and customization of default strings and accessibility announcements.

object


{
  activePeriodValue: "string",
  activeSection: "string",
  activeSectionValue: "string",
  chooseTime: "string",
  currentValue: "string",
  inputLabel: "string",
  invalidTime: "string",
  openDrop: "string",
  sectionHours: "string",
  sectionMeridiem: "string",
  sectionMinutes: "string",
  sectionSeconds: "string"
}

minuteStep

The increment, in minutes, used when navigating the minutes section with the up/down arrow keys or the drop options.

number

name

The name of the input. This property is required when used within FormField.

string

"name"

onChange

Function that will be called when the user types or selects a time. The updated value will be available via 'event.value'.

function

({ value }) => {}

readOnly

Whether the TimeInput is read-only.

boolean

true

false

value

The time value, in HH:mm:ss format.

string

"14:30:00"

Theme

timeInput.active.background

The background of the currently active time section.

string

"active-background"

timeInput.active.indicator.color

The color of the active section's indicator bar.

string

"white"

object

{ dark: "white", light: "black" }

timeInput.active.indicator.size

The size of the active section's indicator bar.

string

"small"

timeInput.active.pad

The padding around the currently active time section.

string

"xxsmall"

timeInput.button.margin

The margin around the clock icon used to open the time selection drop.

object

{ right: "small" }

timeInput.container.round

How much to round the corners.

string

"xxsmall"

timeInput.drop.option.background

The background of an option in the time selection drop.

string

"background-front"

timeInput.drop.option.hover.background

The background of an option in the time selection drop when hovered or active via keyboard navigation.

string

"active-background"

timeInput.drop.option.selected.background

The background of the selected option.

string

"selected"

timeInput.drop.option.selected.color

The text color of the selected option.

string

"white"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

timeInput.drop.option.selected.hover.background

The background of the selected option when hovered or active via keyboard navigation.

string

"selected"

timeInput.icon.clock

The icon used in the input to open the time selection drop.

node

<Clock />