---
title: TimePicker
description: Allows merchants to select a specific time.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/timepicker
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/timepicker.md
---

# Time​Picker

Allows merchants to select a specific time.

## Properties

* id

  string

  A unique identifier for the element.

* value

  string

  Default: ''

  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>

  If the provided value is invalid, '' is used as the value.

## Events

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

* blur

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

  Callback when the time picker is dismissed.

* change

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

  Callback when the user selects a time from the picker that is different to the current value.

* focus

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

  Callback when the time picker is revealed.

* input

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

  Callback when the user selects a time from the picker.

### 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-button command="--show" commandFor="time-picker">
    Show
  </s-button>
  <s-time-picker
    value="9:41"
    id="time-picker"
  />
  ```

## Preview

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

## Examples

TimePicker usage patterns

### Examples

* #### Command system

  ##### Description

  Show and hide TimePicker using button commands

  ##### Default

  ```jsx
  <>
    <s-button command="--show" commandFor="time-picker">
      Select Time
    </s-button>
    <s-time-picker
      id="time-picker"
      value="14:30"
      onChange={(event) => console.log('Time selected:', event.currentTarget.value)}
    />
  </>;
  ```

* #### Event handling

  ##### Description

  Handle time selection events

  ##### Default

  ```jsx
  <s-time-picker
    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')}
  />
  ```