TimePicker

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

TextField time

TextField time

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
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	"Choose time"
titleTextOptional	Visible title. string | undefined	"Select time"
formatOptional	Clock format. TimePickerFormat | undefined	"12h"	-
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	"OK"
cancelTextOptional	Text for the cancel button. string | undefined	"Cancel"
modelValueOptional	- TimePickerModelValue	-	-
openOptional	- boolean | undefined	false

Events5

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

Slots0

No slots documented.

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.

Examples

Default

24-hour

Keyboard input