> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Time picker

> A visual time selector used inside date time pickers or standalone for time-only input. Handles hour and minute selection — only include seconds when the use case genuinely requires that level of precision.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-timepicker--docs)

## When to use

* **Filtering views:** Filtering data or reports by a time window.
* **To ensure proper formatting:** Avoids input errors by enforcing a standard format.
* **Comparison:** When comparing activity across a defined time period.

## When not to use

* **For relative time queries:** While a Time picker may be helpful, consider adding shortcuts to the picker for a quicker selection, such as "2 hours ago", "20 minutes ago" and "in 3 days".
* **When entering fixed or recurring time values:** Consider allowing for cron expressions or pre-set time stamps users can choose from.
* **When exact timing and format is not important:** When users leave comments or descriptions where they reference a date or time but the formatting does not matter, provide a simple [Input](/cdf/aura/primitives/input) or [Textarea](/cdf/aura/primitives/textarea).

## Dos and don'ts

* **Do** match the time format (12hr/24hr) to the user's locale or application setting — don't hardcode one.
* **Do** include AM/PM selection clearly when using 12-hour format; ambiguity here causes real errors.
* **Don't** include seconds unless the context requires it (log timestamps, precise scheduling) — it adds complexity most users don't need.

## Behavior

* Opening the control reveals a time picker calendar UI anchored to the field.
* Keyboard users must be able to type valid values and open the picker without relying on the mouse alone (implementation-specific shortcuts allowed).
* If the time value has constraints (e.g. only future times, business hours only), disable invalid times rather than letting users select them and fail on submit.

## Often used with

* [Date picker](/cdf/aura/primitives/date-picker), [Label](/cdf/aura/primitives/label), [Helper text](/cdf/aura/primitives/helper-text).

## Accessibility

* Provide distinct accessible labels for individual hour, minute, and period controls (e.g., `aria-label="Hours"`, `aria-label="Minutes"`, `aria-label="AM or PM"`).
* Specify 12-hour or 24-hour format expectations clearly in the visual field label or through `aria-describedby`.
* Ensure custom increment and decrement step buttons possess explicit `aria-label` descriptions (e.g., `aria-label="Increase hours"`).
