---
url: /components/time-pickers/specs.md
description: >-
  Time pickers help users select and set a specific time. There are two types of
  time pickers: dial and input.
---

# Time pickers

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

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

<a id="2ccd9809-9246-4667-85fa-7747f4ac7349"></a>

## Tokens & specs

Select a component variant below to see its elements, attributes, tokens, and their values. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-39f4b152dd9bd292-e1c4fa05
**Time pickers tokens** · 2 token sets · 174 tokens · [live token table](https://m3.material.io/components/time-pickers/specs) · 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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#6750A4` via `md.ref.palette.primary40`<br>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`<br>Medium contrast: `#7D5260` via `md.ref.palette.tertiary40`<br>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`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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<br>font names: `md.comp.time-picker.time-selector.label-text.font` → `md.sys.typescale.display-large.font` → `md.ref.typeface.brand`<br>font weight: `md.comp.time-picker.time-selector.label-text.weight` → `md.sys.typescale.display-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.time-picker.time-selector.label-text.size` → `md.sys.typescale.display-large.size`<br>line height: `md.comp.time-picker.time-selector.label-text.line-height` → `md.sys.typescale.display-large.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.time-picker.period-selector.label-text.font` → `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.time-picker.period-selector.label-text.weight` → `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.time-picker.period-selector.label-text.size` → `md.sys.typescale.title-medium.size`<br>line height: `md.comp.time-picker.period-selector.label-text.line-height` → `md.sys.typescale.title-medium.line-height`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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<br>font names: `md.comp.time-picker.clock-dial.label-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.time-picker.clock-dial.label-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.time-picker.clock-dial.label-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.time-picker.clock-dial.label-text.line-height` → `md.sys.typescale.body-large.line-height`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.time-picker.headline.font` → `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.time-picker.headline.weight` → `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.time-picker.headline.size` → `md.sys.typescale.label-medium.size`<br>line height: `md.comp.time-picker.headline.line-height` → `md.sys.typescale.label-medium.line-height`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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<br>font names: `md.comp.time-picker.time-selector.separator.font` → `md.sys.typescale.display-large.font` → `md.ref.typeface.brand`<br>font weight: `md.comp.time-picker.time-selector.separator.weight` → `md.sys.typescale.display-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.time-picker.time-selector.separator.size` → `md.sys.typescale.display-large.size`<br>line height: `md.comp.time-picker.time-selector.separator.line-height` → `md.sys.typescale.display-large.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#7D5260` via `md.ref.palette.tertiary40`<br>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`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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<br>font names: `md.comp.time-input.time-input-field.label-text.font` → `md.sys.typescale.display-medium.font` → `md.ref.typeface.brand`<br>font weight: `md.comp.time-input.time-input-field.label-text.weight` → `md.sys.typescale.display-medium.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.time-input.time-input-field.label-text.size` → `md.sys.typescale.display-medium.size`<br>line height: `md.comp.time-input.time-input-field.label-text.line-height` → `md.sys.typescale.display-medium.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.time-input.period-selector.label-text.font` → `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.time-input.period-selector.label-text.weight` → `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.time-input.period-selector.label-text.size` → `md.sys.typescale.title-medium.size`<br>line height: `md.comp.time-input.period-selector.label-text.line-height` → `md.sys.typescale.title-medium.line-height`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.time-input.headline.font` → `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.time-input.headline.weight` → `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.time-input.headline.size` → `md.sys.typescale.label-medium.size`<br>line height: `md.comp.time-input.headline.line-height` → `md.sys.typescale.label-medium.line-height`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.comp.time-input.time-input-field.supporting-text.font` → `md.sys.typescale.body-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.time-input.time-input-field.supporting-text.weight` → `md.sys.typescale.body-small.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.time-input.time-input-field.supporting-text.size` → `md.sys.typescale.body-small.size`<br>line height: `md.comp.time-input.time-input-field.supporting-text.line-height` → `md.sys.typescale.body-small.line-height`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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<br>font names: `md.comp.time-input.time-input-field.separator.font` → `md.sys.typescale.display-large.font` → `md.ref.typeface.brand`<br>font weight: `md.comp.time-input.time-input-field.separator.weight` → `md.sys.typescale.display-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.time-input.time-input-field.separator.size` → `md.sys.typescale.display-large.size`<br>line height: `md.comp.time-input.time-input-field.separator.line-height` → `md.sys.typescale.display-large.line-height`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#6750A4` via `md.ref.palette.primary40`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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

![Diagram indicating the 14 elements of a time picker dial.](/assets/22ca4412-mdcxf11n-01-3p.CilxM5KH.webp)

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

![Diagram indicating the 10 elements of a time picker input.](/assets/41def41f-mdcxfokb-02-3p.AhoSiMu5.webp)

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](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). 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](../../foundations/design-tokens/overview.md)

### Time picker dial color

![Side-by-side diagram indicating the 17 different color elements of a time picker dial.](/assets/b318610b-l6nxwe4v-1p-color-time-pickers-1.CYElR9of.webp)

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

![Side-by-side diagram indicating the 13 different color elements of a time picker input.](/assets/8e8415c3-l6nxy34v-1p-color-time-input-1.Bjgf79HZ.webp)

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

![Diagram showing the 4 interactive states of a time picker, in both light theme and dark theme.](/assets/5153011a-m8t5j9hb-5b.CLKOEXPE.webp)

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

[States specs can be found in the token module above](#2ccd9809-9246-4667-85fa-7747f4ac7349)

## Measurements

### Time picker dial - vertical

![Diagram of vertical time picker dial measurements.](/assets/f494ac29-l6p241d2-1p-layout-time-pickers-vertical-1.CELeIWWz.webp)

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

![Diagram of horizontal time picker dial measurements.](/assets/5eda16cb-l6p279e1-1p-layout-time-pickers-horizontal-3.BNw7G5Y6.webp)

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

![Diagram of time picker input measurements.](/assets/b5681bf4-l6p28zo3-1p-layout-time-input-1.BWLtie8F.webp)

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

![Comparing vertical and horizontal time picker dials.](/assets/b9c7d716-l7ao2hx2-1p-guideline-time-pickers-configurations.75P7q5uf.webp)

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

### 24-hour time picker dial

![2 24-hour time picker dials with vertical and horizontal layouts.](/assets/d66f10fb-l7ao3ny7-1p-guideline-time-pickers-configurations-24h.BhNsloaJ.webp)

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

### 12-hour and 24-hour time picker inputs

![Compare 12-hour and 24-hour time picker inputs.](/assets/0a6bf51e-l7ao513q-1p-guideline-time-input-configurations.BLC8Gh-4.webp)

1. 12h input
2. 24h input