TimePicker

TimePicker is a standalone time selection surface. TextField uses it automatically for type="time".

Select time

:

TextField time

TextField time

Select time

Hour:Minute

update:open(false) is emitted when the native popover closes. Use closed for cleanup that must wait until the TimePicker-owned visual exit finishes.

Density

TimePicker inherits --md-density for its numeric display, keyboard inputs, period controls and surrounding spacing. The clock face, clock labels and hand geometry keep their dimensions so pointer selection remains consistent.

Format and Input Mode

format selects 12h or 24h; inputMode selects clock or keyboard. Explicit props override the corresponding values in timePickerContextKey. Without a format preference, standalone TimePicker follows the configured or browser locale, while TextField's embedded time picker uses 24h. Without an input-mode preference, 12-hour pickers start with the clock and 24-hour pickers start with keyboard input. Users can switch modes within an open picker.

Set timePickerDefaults.format and timePickerDefaults.inputMode through M3VuePlugin, or provide the context for a subtree. Both standalone and TextField time pickers inherit these preferences. See component defaults.

Examples

Default

Select time

:

24-hour

Select departure time

Hour:Minute

Keyboard input

Select time

Hour:Minute

Reference

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="time-picker"][data-part="root"] left_clickLMBCopy
<div>	surface	[data-scope="time-picker"][data-part="surface"] left_clickLMBCopy
<header>	header	[data-scope="time-picker"][data-part="header"] left_clickLMBCopy
<div>	title	[data-scope="time-picker"][data-part="title"] left_clickLMBCopy
<div>	displayconditional	[data-scope="time-picker"][data-part="display"] left_clickLMBCopy
<button>	hour-display	[data-scope="time-picker"][data-part="hour-display"] left_clickLMBCopy
<span>	display-separator	[data-scope="time-picker"][data-part="display-separator"] left_clickLMBCopy
<button>	minute-display	[data-scope="time-picker"][data-part="minute-display"] left_clickLMBCopy
<div>	period-selectorconditional	[data-scope="time-picker"][data-part="period-selector"] left_clickLMBCopy
<button>	period-option	[data-scope="time-picker"][data-part="period-option"] left_clickLMBCopy
<div>	clockconditional	[data-scope="time-picker"][data-part="clock"] left_clickLMBCopy
<div>	clock-face	[data-scope="time-picker"][data-part="clock-face"] left_clickLMBCopy
<div>	clock-hand	[data-scope="time-picker"][data-part="clock-hand"] left_clickLMBCopy
<button>	clock-option	[data-scope="time-picker"][data-part="clock-option"] left_clickLMBCopy
<div>	inputs	[data-scope="time-picker"][data-part="inputs"] left_clickLMBCopy
<label>	hour-input-field	[data-scope="time-picker"][data-part="hour-input-field"] left_clickLMBCopy
<input>	hour-input	[data-scope="time-picker"][data-part="hour-input"] left_clickLMBCopy
<span>	input-label	[data-scope="time-picker"][data-part="input-label"] left_clickLMBCopy
<span>	input-errorconditional	[data-scope="time-picker"][data-part="input-error"] left_clickLMBCopy
<span>	input-separator	[data-scope="time-picker"][data-part="input-separator"] left_clickLMBCopy
<label>	minute-input-field	[data-scope="time-picker"][data-part="minute-input-field"] left_clickLMBCopy
<input>	minute-input	[data-scope="time-picker"][data-part="minute-input"] left_clickLMBCopy
<div>	actions	[data-scope="time-picker"][data-part="actions"] left_clickLMBCopy
<IconButton>	mode-toggle	[data-scope="time-picker"][data-part="mode-toggle"] left_clickLMBCopy
<span>	actions-spacer	[data-scope="time-picker"][data-part="actions-spacer"] left_clickLMBCopy

Props

Name	Description	Default	Control
shapeOptional	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
idOptional	Optional explicit id for the popover element. string | undefined	undefined	-
variantOptional	Visual and positioning mode. Auto uses docked layout until a narrow/coarse pointer viewport. TimePickerVariant | undefined	"auto"	-
anchorNameOptional	CSS anchor name used to position the docked popover. string | undefined	undefined	-
anchorElementOptional	Element passed to showPopover as the source for focus and dismissal semantics. HTMLElement | undefined	undefined	-
ariaLabelOptional	Accessible label for the picker surface. string | undefined	undefined
titleTextOptional	Visible title. string | undefined	undefined
localeOptional	BCP 47 locale used for the default clock format and day-period labels. string | undefined	undefined
formatOptional	Clock format. Defaults to the locale's preferred hour cycle. TimePickerFormat | undefined	undefined	-
inputModeOptional	Initial input mode. If omitted, 12h starts in clock mode and 24h starts in keyboard mode. TimePickerInputMode | undefined	undefined	-
confirmTextOptional	Text for the confirmation button. string | undefined	undefined
cancelTextOptional	Text for the cancel button. string | undefined	undefined
modelValueOptional	- TimePickerModelValue	-	-
openOptional	- boolean | undefined	false

Events6

Name	Type	Description
update:open	[value: boolean]	-
cancel	[]	-
closed	[]	-
update:modelValue	[value: TimePickerModelValue]	-
change	[value: TimePickerModelValue]	-
confirm	[value: TimePickerModelValue]	-

Styling14

Preview

Token	Description
--md-time-picker-container-colorColor Fallbackvar(--md-sys-color-surface-container-high)	Controls container color.
--md-time-picker-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls container elevation.
--md-time-picker-container-shapeShape Fallbackvar(--md-shape-overlay)	Controls container shape.
--md-time-picker-container-widthLayout Fallback22.5rem	Controls container width.
--md-time-picker-clock-dial-container-colorColor Fallbackvar(--md-sys-color-surface-container-highest)	Controls clock dial container color.
--md-time-picker-clock-hand-colorColor Fallbackvar(--md-sys-color-primary)	Controls clock hand and selected clock option color.
--md-time-picker-clock-label-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls unselected clock option label color.
--md-time-picker-clock-selected-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected clock option label color.
--md-time-picker-selector-container-colorColor Fallbackvar(--md-sys-color-surface-container-highest)	Controls time selector field container color.
--md-time-picker-selector-selected-container-colorState Fallbackvar(--md-sys-color-primary-container)	Controls selected time selector field container color.
--md-time-picker-selector-selected-label-text-colorState Fallbackvar(--md-sys-color-on-primary-container)	Controls selected time selector field label color.
--md-time-picker-selector-unselected-label-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls unselected time selector field label color.
--md-time-picker-period-selector-outline-colorColor Fallbackvar(--md-sys-color-outline)	Controls AM/PM selector outline color.
--md-time-picker-title-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls title text color.