Time picker

A dropdown list for choosing a time of day, rendered like Slack's timepicker.

timepicker opens a scrollable list of times in 30-minute increments. Use it in an actions block or a section’s accessory for a quick pick, or in an input block to collect a time in a modal.

Fields

Examples

Without an initial value

The closed control shows the placeholder text, or “Select time” if none is given, until a time is picked. Then it reads e.g. “1:37 PM”.

With an initial value

Inside an input block

With a time zone

Setting timezone shows a hint underneath the control naming it:

timezone is a display hint only: it labels the picker but doesn’t shift initial_time or the options list, which are always plain HH:mm wall-clock values. It’s unrelated to the timeZone prop on BlockKitProvider, which controls how other elements (like datetimepicker) format their values for display.

With a confirmation dialog

Interactivity

Picking an option fires an action with selected_time:

{
  "type": "timepicker",
  "action_id": "select_time",
  "block_id": "meeting",
  "selected_time": "14:30"
}

The same shape lands in state.values[block_id][action_id]:

{
  "type": "timepicker",
  "selected_time": "14:30"
}

When initial_time is set, that value is reported as state as soon as the element mounts, before any interaction.

Related