Time pickers

Time pickers help users select and set a specific time. There are two types of time pickers: dial and input.

Overview · Specs · Guidelines · Accessibility

Tokens & specs

Select a component variant below to see its elements, attributes, tokens, and their values. Learn more about design tokens

Design tokens

Token table

Machine-readable relationship table

Time pickers tokens · 2 token sets · 174 tokens · live token table · DSDB TOKEN_TABLE.39f4b152dd9bd292

• Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Time picker - Dial · md.comp.time-picker · 99 tokens

For dial time pickers.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.time-picker.container.color	Color	md.sys.color.surface-container-high → md.ref.palette.neutral92	#ECE6F0	Dark: #2B2930 via md.ref.palette.neutral17
Enabled › Container	md.comp.time-picker.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled › Container	md.comp.time-picker.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint → md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.time-picker.container.shape	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—
Enabled › Container	md.comp.time-picker.time-selector.selected.container.color	Color	md.sys.color.primary-container → md.ref.palette.primary90	#EADDFF	Dark: #4F378B via md.ref.palette.primary30 Medium contrast: #6750A4 via md.ref.palette.primary40 High contrast: #4F378B via md.ref.palette.primary30
Enabled › Container	md.comp.time-picker.time-selector.unselected.container.color	Color	md.sys.color.surface-container-highest → md.ref.palette.neutral90	#E6E0E9	Dark: #36343B via md.ref.palette.neutral22
Enabled › Container	md.comp.time-picker.time-selector.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.time-picker.period-selector.selected.container.color	Color	md.sys.color.tertiary-container → md.ref.palette.tertiary90	#FFD8E4	Dark: #633B48 via md.ref.palette.tertiary30 Medium contrast: #7D5260 via md.ref.palette.tertiary40 High contrast: #633B48 via md.ref.palette.tertiary30
Enabled › Container	md.comp.time-picker.period-selector.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.time-picker.period-selector.outline.color	Color	md.sys.color.outline → md.ref.palette.neutral-variant50	#79747E	Dark: #938F99 via md.ref.palette.neutral-variant60 Medium contrast: #49454F via md.ref.palette.neutral-variant30 High contrast: #322F37 via md.ref.palette.neutral-variant20
Enabled › Container	md.comp.time-picker.period-selector.outline.width	Length	—	1dp	—
Enabled › Container	md.comp.time-picker.clock-dial.color.ignore (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Container	md.comp.time-picker.clock-dial.shape.ignore (deprecated)	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Container	md.comp.time-picker.clock-dial.selector.handle.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.time-picker.clock-dial.selector.handle.container.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Container	md.comp.time-picker.clock-dial.selector.center.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.time-picker.clock-dial.selector.center.container.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Container	md.comp.time-picker.clock-dial.selector.track.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.time-picker.time-selector.container.width	Length	—	96dp	—
Enabled › Container	md.comp.time-picker.time-selector.24h-vertical.container.width	Length	—	114dp	—
Enabled › Container	md.comp.time-picker.time-selector.container.height	Length	—	80dp	—
Enabled › Container	md.comp.time-picker.period-selector.vertical.container.width	Length	—	52dp	—
Enabled › Container	md.comp.time-picker.period-selector.vertical.container.height	Length	—	80dp	—
Enabled › Container	md.comp.time-picker.period-selector.horizontal.container.width	Length	—	216dp	—
Enabled › Container	md.comp.time-picker.period-selector.horizontal.container.height	Length	—	38dp	—
Enabled › Container	md.comp.time-picker.clock-dial.container.size	Length	—	256dp	—
Enabled › Container	md.comp.time-picker.clock-dial.selector.handle.container.size	Length	—	48dp	—
Enabled › Container	md.comp.time-picker.clock-dial.selector.center.container.size	Length	—	8dp	—
Enabled › Container	md.comp.time-picker.clock-dial.selector.track.container.width	Length	—	2dp	—
Enabled › Container	md.comp.time-picker.clock-dial.color	Color	md.sys.color.surface-container-highest → md.ref.palette.neutral90	#E6E0E9	Dark: #36343B via md.ref.palette.neutral22
Enabled › Container	md.comp.time-picker.clock-dial.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Label text	md.comp.time-picker.time-selector.selected.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Enabled › Label text	md.comp.time-picker.time-selector.unselected.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.time-picker.time-selector.label-text.font	Font names	md.sys.typescale.display-large.font → md.ref.typeface.brand	Roboto	—
Enabled › Label text	md.comp.time-picker.time-selector.label-text.line-height	Line height	md.sys.typescale.display-large.line-height	64pt	—
Enabled › Label text	md.comp.time-picker.time-selector.label-text.size	Font size	md.sys.typescale.display-large.size	57pt	—
Enabled › Label text	md.comp.time-picker.time-selector.label-text.weight	Font weight	md.sys.typescale.display-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Label text	md.comp.time-picker.time-selector.label-text.tracking	Font tracking	md.sys.typescale.display-large.tracking	-0.25pt	—
Enabled › Label text	md.comp.time-picker.time-selector.label-text.type	Typography	composite font names: md.comp.time-picker.time-selector.label-text.font → md.sys.typescale.display-large.font → md.ref.typeface.brand font weight: md.comp.time-picker.time-selector.label-text.weight → md.sys.typescale.display-large.weight → md.ref.typeface.weight-regular font size: md.comp.time-picker.time-selector.label-text.size → md.sys.typescale.display-large.size line height: md.comp.time-picker.time-selector.label-text.line-height → md.sys.typescale.display-large.line-height font tracking: md.comp.time-picker.time-selector.label-text.tracking → md.sys.typescale.display-large.tracking	Roboto · weight 400 · size 57pt · line height 64pt · tracking -0.25pt	—
Enabled › Label text	md.comp.time-picker.period-selector.selected.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Enabled › Label text	md.comp.time-picker.period-selector.unselected.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Label text	md.comp.time-picker.period-selector.label-text.font	Font names	md.sys.typescale.title-medium.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.time-picker.period-selector.label-text.line-height	Line height	md.sys.typescale.title-medium.line-height	24pt	—
Enabled › Label text	md.comp.time-picker.period-selector.label-text.size	Font size	md.sys.typescale.title-medium.size	16pt	—
Enabled › Label text	md.comp.time-picker.period-selector.label-text.weight	Font weight	md.sys.typescale.title-medium.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.time-picker.period-selector.label-text.tracking	Font tracking	md.sys.typescale.title-medium.tracking	0.15pt	—
Enabled › Label text	md.comp.time-picker.period-selector.label-text.type	Typography	composite font names: md.comp.time-picker.period-selector.label-text.font → md.sys.typescale.title-medium.font → md.ref.typeface.plain font weight: md.comp.time-picker.period-selector.label-text.weight → md.sys.typescale.title-medium.weight → md.ref.typeface.weight-medium font size: md.comp.time-picker.period-selector.label-text.size → md.sys.typescale.title-medium.size line height: md.comp.time-picker.period-selector.label-text.line-height → md.sys.typescale.title-medium.line-height font tracking: md.comp.time-picker.period-selector.label-text.tracking → md.sys.typescale.title-medium.tracking	Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.15pt	—
Enabled › Label text	md.comp.time-picker.clock-dial.selected.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Enabled › Label text	md.comp.time-picker.clock-dial.unselected.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.time-picker.clock-dial.label-text.font	Font names	md.sys.typescale.body-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.time-picker.clock-dial.label-text.line-height	Line height	md.sys.typescale.body-large.line-height	24pt	—
Enabled › Label text	md.comp.time-picker.clock-dial.label-text.size	Font size	md.sys.typescale.body-large.size	16pt	—
Enabled › Label text	md.comp.time-picker.clock-dial.label-text.weight	Font weight	md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Label text	md.comp.time-picker.clock-dial.label-text.tracking	Font tracking	md.sys.typescale.body-large.tracking	0.5pt	—
Enabled › Label text	md.comp.time-picker.clock-dial.label-text.type	Typography	composite font names: md.comp.time-picker.clock-dial.label-text.font → md.sys.typescale.body-large.font → md.ref.typeface.plain font weight: md.comp.time-picker.clock-dial.label-text.weight → md.sys.typescale.body-large.weight → md.ref.typeface.weight-regular font size: md.comp.time-picker.clock-dial.label-text.size → md.sys.typescale.body-large.size line height: md.comp.time-picker.clock-dial.label-text.line-height → md.sys.typescale.body-large.line-height font tracking: md.comp.time-picker.clock-dial.label-text.tracking → md.sys.typescale.body-large.tracking	Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt	—
Enabled › Headline	md.comp.time-picker.headline.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Headline	md.comp.time-picker.headline.font	Font names	md.sys.typescale.label-medium.font → md.ref.typeface.plain	Roboto	—
Enabled › Headline	md.comp.time-picker.headline.line-height	Line height	md.sys.typescale.label-medium.line-height	16pt	—
Enabled › Headline	md.comp.time-picker.headline.size	Font size	md.sys.typescale.label-medium.size	12pt	—
Enabled › Headline	md.comp.time-picker.headline.weight	Font weight	md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium	500	—
Enabled › Headline	md.comp.time-picker.headline.tracking	Font tracking	md.sys.typescale.label-medium.tracking	0.5pt	—
Enabled › Headline	md.comp.time-picker.headline.type	Typography	composite font names: md.comp.time-picker.headline.font → md.sys.typescale.label-medium.font → md.ref.typeface.plain font weight: md.comp.time-picker.headline.weight → md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium font size: md.comp.time-picker.headline.size → md.sys.typescale.label-medium.size line height: md.comp.time-picker.headline.line-height → md.sys.typescale.label-medium.line-height font tracking: md.comp.time-picker.headline.tracking → md.sys.typescale.label-medium.tracking	Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt	—
Enabled › Separator	md.comp.time-picker.time-selector.separator.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Separator	md.comp.time-picker.time-selector.separator.font	Font names	md.sys.typescale.display-large.font → md.ref.typeface.brand	Roboto	—
Enabled › Separator	md.comp.time-picker.time-selector.separator.line-height	Line height	md.sys.typescale.display-large.line-height	64pt	—
Enabled › Separator	md.comp.time-picker.time-selector.separator.size	Font size	md.sys.typescale.display-large.size	57pt	—
Enabled › Separator	md.comp.time-picker.time-selector.separator.weight	Font weight	md.sys.typescale.display-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Separator	md.comp.time-picker.time-selector.separator.tracking	Font tracking	md.sys.typescale.display-large.tracking	-0.25pt	—
Enabled › Separator	md.comp.time-picker.time-selector.separator.type	Typography	composite font names: md.comp.time-picker.time-selector.separator.font → md.sys.typescale.display-large.font → md.ref.typeface.brand font weight: md.comp.time-picker.time-selector.separator.weight → md.sys.typescale.display-large.weight → md.ref.typeface.weight-regular font size: md.comp.time-picker.time-selector.separator.size → md.sys.typescale.display-large.size line height: md.comp.time-picker.time-selector.separator.line-height → md.sys.typescale.display-large.line-height font tracking: md.comp.time-picker.time-selector.separator.tracking → md.sys.typescale.display-large.tracking	Roboto · weight 400 · size 57pt · line height 64pt · tracking -0.25pt	—
Hovered › Label text	md.comp.time-picker.time-selector.selected.hover.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Hovered › Label text	md.comp.time-picker.time-selector.unselected.hover.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Label text	md.comp.time-picker.period-selector.selected.hover.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Hovered › Label text	md.comp.time-picker.period-selector.unselected.hover.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.time-picker.time-selector.selected.hover.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Hovered › State layer	md.comp.time-picker.time-selector.unselected.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › State layer	md.comp.time-picker.time-selector.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › State layer	md.comp.time-picker.period-selector.selected.hover.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Hovered › State layer	md.comp.time-picker.period-selector.unselected.hover.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.time-picker.period-selector.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Focused › Label text	md.comp.time-picker.time-selector.selected.focus.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Focused › Label text	md.comp.time-picker.time-selector.unselected.focus.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › Label text	md.comp.time-picker.period-selector.selected.focus.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Focused › Label text	md.comp.time-picker.period-selector.unselected.focus.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.time-picker.time-selector.selected.focus.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Focused › State layer	md.comp.time-picker.time-selector.unselected.focus.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Focused › State layer	md.comp.time-picker.time-selector.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › State layer	md.comp.time-picker.period-selector.selected.focus.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Focused › State layer	md.comp.time-picker.period-selector.unselected.focus.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.time-picker.period-selector.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Pressed (ripple) › Label text	md.comp.time-picker.time-selector.selected.pressed.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Pressed (ripple) › Label text	md.comp.time-picker.time-selector.unselected.pressed.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Pressed (ripple) › Label text	md.comp.time-picker.period-selector.selected.pressed.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Pressed (ripple) › Label text	md.comp.time-picker.period-selector.unselected.pressed.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.time-picker.time-selector.selected.pressed.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Pressed (ripple) › State layer	md.comp.time-picker.time-selector.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Pressed (ripple) › State layer	md.comp.time-picker.time-selector.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › State layer	md.comp.time-picker.period-selector.selected.pressed.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Pressed (ripple) › State layer	md.comp.time-picker.period-selector.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.time-picker.period-selector.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—

Time picker - Input · md.comp.time-input · 75 tokens

For input time pickers.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.time-input.container.color	Color	md.sys.color.surface-container-high → md.ref.palette.neutral92	#ECE6F0	Dark: #2B2930 via md.ref.palette.neutral17
Enabled › Container	md.comp.time-input.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled › Container	md.comp.time-input.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint → md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.time-input.container.shape	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—
Enabled › Container	md.comp.time-input.time-input-field.container.color	Color	md.sys.color.surface-container-highest → md.ref.palette.neutral90	#E6E0E9	Dark: #36343B via md.ref.palette.neutral22
Enabled › Container	md.comp.time-input.time-input-field.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.time-input.period-selector.selected.container.color	Color	md.sys.color.tertiary-container → md.ref.palette.tertiary90	#FFD8E4	Dark: #633B48 via md.ref.palette.tertiary30 Medium contrast: #7D5260 via md.ref.palette.tertiary40 High contrast: #633B48 via md.ref.palette.tertiary30
Enabled › Container	md.comp.time-input.period-selector.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
Enabled › Container	md.comp.time-input.period-selector.outline.color	Color	md.sys.color.outline → md.ref.palette.neutral-variant50	#79747E	Dark: #938F99 via md.ref.palette.neutral-variant60 Medium contrast: #49454F via md.ref.palette.neutral-variant30 High contrast: #322F37 via md.ref.palette.neutral-variant20
Enabled › Container	md.comp.time-input.period-selector.outline.width	Length	—	1dp	—
Enabled › Container	md.comp.time-input.time-input-field.container.width	Length	—	96dp	—
Enabled › Container	md.comp.time-input.time-input-field.container.height	Length	—	72dp	—
Enabled › Container	md.comp.time-input.period-selector.container.width	Length	—	52dp	—
Enabled › Container	md.comp.time-input.period-selector.container.height	Length	—	72dp	—
Enabled › Label text	md.comp.time-input.time-input-field.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.time-input.time-input-field.label-text.font	Font names	md.sys.typescale.display-medium.font → md.ref.typeface.brand	Roboto	—
Enabled › Label text	md.comp.time-input.time-input-field.label-text.line-height	Line height	md.sys.typescale.display-medium.line-height	52pt	—
Enabled › Label text	md.comp.time-input.time-input-field.label-text.size	Font size	md.sys.typescale.display-medium.size	45pt	—
Enabled › Label text	md.comp.time-input.time-input-field.label-text.weight	Font weight	md.sys.typescale.display-medium.weight → md.ref.typeface.weight-regular	400	—
Enabled › Label text	md.comp.time-input.time-input-field.label-text.tracking	Font tracking	md.sys.typescale.display-medium.tracking	0pt	—
Enabled › Label text	md.comp.time-input.time-input-field.label-text.type	Typography	composite font names: md.comp.time-input.time-input-field.label-text.font → md.sys.typescale.display-medium.font → md.ref.typeface.brand font weight: md.comp.time-input.time-input-field.label-text.weight → md.sys.typescale.display-medium.weight → md.ref.typeface.weight-regular font size: md.comp.time-input.time-input-field.label-text.size → md.sys.typescale.display-medium.size line height: md.comp.time-input.time-input-field.label-text.line-height → md.sys.typescale.display-medium.line-height font tracking: md.comp.time-input.time-input-field.label-text.tracking → md.sys.typescale.display-medium.tracking	Roboto · weight 400 · size 45pt · line height 52pt · tracking 0pt	—
Enabled › Label text	md.comp.time-input.period-selector.selected.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Enabled › Label text	md.comp.time-input.period-selector.unselected.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Label text	md.comp.time-input.period-selector.label-text.font	Font names	md.sys.typescale.title-medium.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.time-input.period-selector.label-text.line-height	Line height	md.sys.typescale.title-medium.line-height	24pt	—
Enabled › Label text	md.comp.time-input.period-selector.label-text.size	Font size	md.sys.typescale.title-medium.size	16pt	—
Enabled › Label text	md.comp.time-input.period-selector.label-text.weight	Font weight	md.sys.typescale.title-medium.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.time-input.period-selector.label-text.tracking	Font tracking	md.sys.typescale.title-medium.tracking	0.15pt	—
Enabled › Label text	md.comp.time-input.period-selector.label-text.type	Typography	composite font names: md.comp.time-input.period-selector.label-text.font → md.sys.typescale.title-medium.font → md.ref.typeface.plain font weight: md.comp.time-input.period-selector.label-text.weight → md.sys.typescale.title-medium.weight → md.ref.typeface.weight-medium font size: md.comp.time-input.period-selector.label-text.size → md.sys.typescale.title-medium.size line height: md.comp.time-input.period-selector.label-text.line-height → md.sys.typescale.title-medium.line-height font tracking: md.comp.time-input.period-selector.label-text.tracking → md.sys.typescale.title-medium.tracking	Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.15pt	—
Enabled › Headline	md.comp.time-input.headline.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Headline	md.comp.time-input.headline.font	Font names	md.sys.typescale.label-medium.font → md.ref.typeface.plain	Roboto	—
Enabled › Headline	md.comp.time-input.headline.line-height	Line height	md.sys.typescale.label-medium.line-height	16pt	—
Enabled › Headline	md.comp.time-input.headline.size	Font size	md.sys.typescale.label-medium.size	12pt	—
Enabled › Headline	md.comp.time-input.headline.weight	Font weight	md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium	500	—
Enabled › Headline	md.comp.time-input.headline.tracking	Font tracking	md.sys.typescale.label-medium.tracking	0.5pt	—
Enabled › Headline	md.comp.time-input.headline.type	Typography	composite font names: md.comp.time-input.headline.font → md.sys.typescale.label-medium.font → md.ref.typeface.plain font weight: md.comp.time-input.headline.weight → md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium font size: md.comp.time-input.headline.size → md.sys.typescale.label-medium.size line height: md.comp.time-input.headline.line-height → md.sys.typescale.label-medium.line-height font tracking: md.comp.time-input.headline.tracking → md.sys.typescale.label-medium.tracking	Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt	—
Enabled › Supporting text	md.comp.time-input.time-input-field.supporting-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Supporting text	md.comp.time-input.time-input-field.supporting-text.font	Font names	md.sys.typescale.body-small.font → md.ref.typeface.plain	Roboto	—
Enabled › Supporting text	md.comp.time-input.time-input-field.supporting-text.line-height	Line height	md.sys.typescale.body-small.line-height	16pt	—
Enabled › Supporting text	md.comp.time-input.time-input-field.supporting-text.size	Font size	md.sys.typescale.body-small.size	12pt	—
Enabled › Supporting text	md.comp.time-input.time-input-field.supporting-text.weight	Font weight	md.sys.typescale.body-small.weight → md.ref.typeface.weight-regular	400	—
Enabled › Supporting text	md.comp.time-input.time-input-field.supporting-text.tracking	Font tracking	md.sys.typescale.body-small.tracking	0.4pt	—
Enabled › Supporting text	md.comp.time-input.time-input-field.supporting-text.type	Typography	composite font names: md.comp.time-input.time-input-field.supporting-text.font → md.sys.typescale.body-small.font → md.ref.typeface.plain font weight: md.comp.time-input.time-input-field.supporting-text.weight → md.sys.typescale.body-small.weight → md.ref.typeface.weight-regular font size: md.comp.time-input.time-input-field.supporting-text.size → md.sys.typescale.body-small.size line height: md.comp.time-input.time-input-field.supporting-text.line-height → md.sys.typescale.body-small.line-height font tracking: md.comp.time-input.time-input-field.supporting-text.tracking → md.sys.typescale.body-small.tracking	Roboto · weight 400 · size 12pt · line height 16pt · tracking 0.4pt	—
Enabled › Separator	md.comp.time-input.time-input-field.separator.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Separator	md.comp.time-input.time-input-field.separator.font	Font names	md.sys.typescale.display-large.font → md.ref.typeface.brand	Roboto	—
Enabled › Separator	md.comp.time-input.time-input-field.separator.line-height	Line height	md.sys.typescale.display-large.line-height	64pt	—
Enabled › Separator	md.comp.time-input.time-input-field.separator.size	Font size	md.sys.typescale.display-large.size	57pt	—
Enabled › Separator	md.comp.time-input.time-input-field.separator.weight	Font weight	md.sys.typescale.display-large.weight → md.ref.typeface.weight-regular	400	—
Enabled › Separator	md.comp.time-input.time-input-field.separator.tracking	Font tracking	md.sys.typescale.display-large.tracking	-0.25pt	—
Enabled › Separator	md.comp.time-input.time-input-field.separator.type	Typography	composite font names: md.comp.time-input.time-input-field.separator.font → md.sys.typescale.display-large.font → md.ref.typeface.brand font weight: md.comp.time-input.time-input-field.separator.weight → md.sys.typescale.display-large.weight → md.ref.typeface.weight-regular font size: md.comp.time-input.time-input-field.separator.size → md.sys.typescale.display-large.size line height: md.comp.time-input.time-input-field.separator.line-height → md.sys.typescale.display-large.line-height font tracking: md.comp.time-input.time-input-field.separator.tracking → md.sys.typescale.display-large.tracking	Roboto · weight 400 · size 57pt · line height 64pt · tracking -0.25pt	—
Hovered › Label text	md.comp.time-input.time-input-field.hover.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › Label text	md.comp.time-input.period-selector.selected.hover.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Hovered › Label text	md.comp.time-input.period-selector.unselected.hover.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.time-input.time-input-field.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Hovered › State layer	md.comp.time-input.time-input-field.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › State layer	md.comp.time-input.period-selector.selected.hover.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Hovered › State layer	md.comp.time-input.period-selector.unselected.hover.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered › State layer	md.comp.time-input.period-selector.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Focused › Container	md.comp.time-input.time-input-field.focus.container.color	Color	md.sys.color.primary-container → md.ref.palette.primary90	#EADDFF	Dark: #4F378B via md.ref.palette.primary30 Medium contrast: #6750A4 via md.ref.palette.primary40 High contrast: #4F378B via md.ref.palette.primary30
Focused › Container	md.comp.time-input.time-input-field.focus.outline.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Container	md.comp.time-input.time-input-field.focus.outline.width	Length	—	2dp	—
Focused › Label text	md.comp.time-input.time-input-field.focus.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Focused › Label text	md.comp.time-input.period-selector.selected.focus.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Focused › Label text	md.comp.time-input.period-selector.unselected.focus.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.time-input.period-selector.selected.focus.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Focused › State layer	md.comp.time-input.period-selector.unselected.focus.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused › State layer	md.comp.time-input.period-selector.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › Focus indicator	md.comp.time-input.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.time-input.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Focused › Focus indicator	md.comp.time-input.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
Pressed (ripple) › Label text	md.comp.time-input.period-selector.selected.pressed.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Pressed (ripple) › Label text	md.comp.time-input.period-selector.unselected.pressed.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.time-input.period-selector.selected.pressed.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Pressed (ripple) › State layer	md.comp.time-input.period-selector.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed (ripple) › State layer	md.comp.time-input.period-selector.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—

Anatomy

Time picker dial

1. Headline
2. Time selector separator
3. Container
4. Period selector container
5. Period selector label text
6. Clock dial selector center
7. Clock dial selector track
8. Text button
9. Icon button
10. Clock dial selector container
11. Clock dial label text
12. Clock dial container
13. Time selector label text
14. Time selector container

Time picker input

1. Headline
2. Time input field seperator
3. Container
4. Period selector container
5. Period selector label text
6. Text button
7. Icon button
8. Time input field supporting text
9. Time input field label text
10. Time input field container

Color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. Learn more about design tokens

Time picker dial color

Time picker dial color roles used for light and dark themes:

1. On surface variant
2. On surface
3. Surface container highest
4. On surface
5. Tertiary container
6. On tertiary container
7. Surface container high
8. Outline
9. On surface
10. Primary
11. On primary
12. Primary
13. On surface variant
14. On surface
15. Surface container highest
16. On primary container
17. Primary container

Time picker input color

Time picker input color roles used for light and dark themes:

1. On surface variant
2. On surface
3. Surface container highest
4. On surface
5. Tertiary container
6. On tertiary container
7. Surface container high
8. Outline
9. On surface
10. Primary
11. On surface variant
12. On primary container
13. Primary container

States

1. Enabled
2. Hover
3. Focus
4. Pressed

States specs can be found in the token module above

Measurements

Time picker dial - vertical

Vertical time picker dial padding and size measurements

Element	Attribute	Value
Container	Width	Dynamic
Container	Height	Dynamic
Container	Headline alignment	Left
Container	Top/bottom padding	24dp
Container	Left/right padding	24dp
Time selector container	Width	96dp
Time selector container	Width (24h vertical)	114dp
Time selector container	Height	80dp
Period selector container	Width (vertical layout)	52dp
Period selector container	Height (vertical layout)	80dp
Period selector container	Width (horizontal layout)	216dp
Period selector container	Height (horizontal layout)	38dp
Clock dial container	Size	256dp
Clock dial selector handle	Size	48dp
Clock dial selector center	Size	8dp
Clock dial selector track	Width	2dp

Time picker dial - horizontal

Horizontal time picker dial padding and size measurements

Element	Attribute	Value
Container	Width	Dynamic
Container	Height	Dynamic
Container	Headline alignment	Left
Container	Top/bottom padding	24dp
Container	Left/right padding	24dp
Time selector container	Width	96dp
Time selector container	Width (24h vertical)	114dp
Time selector container	Height	80dp
Period selector container	Width (vertical layout)	52dp
Period selector container	Height (vertical layout)	80dp
Period selector container	Width (horizontal layout)	216dp
Period selector container	Height (horizontal layout)	38dp
Clock dial container	Size	256dp
Clock dial selector handle	Size	48dp
Clock dial selector center	Size	8dp
Clock dial selector track	Width	2dp

Time picker input

Time picker input padding and size measurements

Element	Attribute	Value
Container	Width	Dynamic
Container	Height	Dynamic
Container	Headline alignment	Left
Container	Top/bottom padding	24dp
Container	Left/right padding	24dp
Time input field container	Width	96dp
Time input field container	Height	72dp
Period selector container	Width	52dp
Period selector container	Height	72dp

Configurations

Vertical orientation and horizontal orientation

1. Vertical layout (default on mobile)
2. Horizontal layout

24-hour time picker dial

1. 24h dial in vertical layout (default on mobile)
2. 24h dial in horizontal layout

12-hour and 24-hour time picker inputs

1. 12h input
2. 24h input