TimeInput

a control to input a time value

Props

defaultValue

The default time value. Accepts HH:mm or HH:mm:ss format.

string

"14:30"

"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"

inline

Whether to render the time picker directly instead of opening it from an input.

boolean

true

false

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",
  currentValueWithoutSeconds: "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

showSeconds

Whether to display and allow editing of the seconds portion of the time value. Defaults to false.

boolean

true

false

value

The time value. Accepts HH:mm or HH:mm:ss format.

string

"14:30"

"14:30:00"

Theme

timeInput.container

Styles the outer field container. Supports Box appearance and sizing properties, including background, border, margin, pad, and round.

object

{ round: "xxsmall" }

{ background: "string", border: {}, margin: "string", pad: "string", round: "string" }

timeInput.value

The visible value frame. Supports Box-part appearance and sizing properties: background, border, elevation, height, margin, pad, round, and width.

object

{ background: "string", border: {}, elevation: "string", height: "string", margin: "string", pad: "string", round: "string", width: "string" }

timeInput.segment

Time sections and separators. Supports Box-part appearance properties (background, border, elevation, height, margin, pad, round, and width) and text properties (color, size, and weight).

Placeholder text supports color, size, and weight. Its active state supports background, border, elevation, pad, and round, plus text color, size, and weight. Set active.border to style the active underline.

object

{
  pad: { horizontal: 'xxsmall' },
  active: {
    background: 'active-background',
    border: {
      color: { dark: 'white', light: 'black' },
      side: 'bottom',
      size: 'small',
    },
  },
}

{
  background: "string",
  border: {},
  color: "string",
  height: "string",
  margin: "string",
  pad: "string",
  placeholder: { color: "string", size: "string", weight: "number" },
  round: "string",
  size: "string",
  weight: "number",
  active: {
    background: "string",
    border: { side: "bottom" },
    color: "string",
    pad: "string",
    round: "string",
    weight: "number"
  }
}

timeInput.dropButton

The popup trigger button. Accepts a Button kind string, an object with kind and icon, or a Button theme object with an optional icon.

string

"toolbar"

object

{ kind: "toolbar", icon: <Clock /> }

timeInput.drop

The popup frame. Supports Box appearance properties, width, height (including height.min), and gap. The base theme defines the default width; if width.max is omitted, it defaults to 100%.

object

{ background: "string", border: {}, gap: "string", height: "string", width: { min: "string", max: "string" } }

timeInput.drop.column

Each popup list. Supports Box-part appearance and sizing properties (background, border, elevation, height, margin, pad, round, and width), plus gap.

object

{
  height: '100%',
  gap: 'xxsmall',
  pad: { horizontal: 'xsmall' },
}

{ background: "string", border: {}, gap: "string", height: "string", margin: "string", pad: "string", round: "string", width: "string" }

timeInput.drop.option.container

The Box-backed option surface. Supports Box-part appearance and sizing properties (background, border, elevation, height, margin, pad, round, and width). Its hover, selected, and selected.hover states support background, border, elevation, pad, and round. Missing selected values inherit the base container style.

object

{
  pad: { vertical: 'xxsmall', horizontal: 'xsmall' },
  round: 4px
  hover: {
    background: 'active-background',
  },
  selected: {
    background: 'selected',
  },
}

{
  background: "string",
  border: {},
  pad: "string",
  round: "string",
  hover: { background: "string" },
  selected: {
    background: "string",
    hover: { background: "string" }
  }
}

timeInput.drop.option.text

The option label. Supports color, size, and weight; selected supports the same properties and overrides their base values individually.

object

{
  selected: {
    color: 'white',
    weight: 500,
  },
}

{ color: "string", size: "string", weight: "number", selected: { color: "string", size: "string", weight: "number" } }