---
title: TimeField
description: Captures time input from merchants. Provides a consistent interface for time selection, with proper validation.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/timefield
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/timefield.md
---

# Time​Field

Captures time input from merchants. Provides a consistent interface for time selection, with proper validation.

## Properties

* details

  string

  Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

  This will also be exposed to screen reader users.

* disabled

  boolean

  Default: false

  Disables the field, disallowing any interaction.

* error

  string

  Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

* id

  string

  A unique identifier for the element.

* label

  string

  Content to use as the field label.

* value

  string

  Current selected value.

  The default, `''`, means no time is selected.

  The value must be a 24-hour time in `HH:mm:ss` format, with leading zeros.

  Examples: `"00:00:00"`, `"09:05:00"`, `"23:59:00"`, `"14:03:30"`.

  This follows the HTML time input value format, which is always 24-hour with leading zeros regardless of UI presentation.

  See: <https://developer.mozilla.org/docs/Web/HTML/Element/input/time>

## Events

Learn more about registering [events](https://shopify.dev/docs/api/pos-ui-extensions/using-polaris-components#events)

* blur

  (event: CallbackEvent<"s-time-field">) => void

  Callback when the element loses focus.

* change

  (event: CallbackEvent<"s-time-field">) => void

  Callback after editing completes (typically on blur).

* focus

  (event: CallbackEvent<"s-time-field">) => void

  Callback when the element receives focus.

* input

  (event: CallbackEvent<"s-time-field">) => void

  Callback when the user makes any changes in the field.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-time-field
    label="Time"
    value="11:42"
  />
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-field-default.png)

## Examples

TimeField usage patterns

### Examples

* #### Event handling

  ##### Description

  Handle time input events

  ##### Default

  ```jsx
  <s-time-field
    label="Appointment time"
    value="14:30"
    onInput={(event) => console.log('Input:', event.currentTarget.value)}
    onChange={(event) => console.log('Change:', event.currentTarget.value)}
    onFocus={(event) => console.log('Focused')}
    onBlur={(event) => console.log('Blurred')}
  />
  ```