# Time picker

Published: October 15, 2025

Version: ^2.6.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_6_0_time_picker_hero.png" alt="Time picker component showing a dropdown of selectable times" />

Introducing the **Time Picker** component—for when you need users to select specific times. Perfect for scheduling appointments, filtering by time ranges, or any scenario where precise time selection matters.

The component handles all the complexity: 12/24-hour formats, time intervals, unavailable slots, keyboard navigation, and proper localization.

```blade
<flux:time-picker wire:model="appointmentTime" />
```

## Input or button trigger

<video autoplay loop muted playsinline class="rounded-2xl border dark:border-zinc-700" width="640" alt="Time picker showing both button and input trigger types">
  <source src="/img/blog/2_6_0_time_picker_input.mp4" type="video/mp4">
</video>

Choose between a button trigger that opens a time selection dropdown, or an input trigger that gives you a native time input with optional dropdown enhancement:

```blade
<flux:time-picker type="button" />
<flux:time-picker type="input" />
```

The input variant even lets you disable the dropdown entirely with `:dropdown="false"` if you want a pure native experience.

[Learn about trigger types →](/components/time-picker#input-trigger)

## Control your intervals

Set the interval between displayed times with the `interval` prop. Default is 30 minutes, but you can use any number:

```blade
<flux:time-picker interval="15" />  <!-- 15-minute intervals -->
<flux:time-picker interval="60" />  <!-- Hourly -->
```

## Min, max, and unavailable times

Restrict selectable times with `min` and `max` boundaries—perfect for business hours or time-based constraints:

```blade
<flux:time-picker min="09:00" max="17:00" />
```

There's even a convenient `"now"` shorthand:

```blade
<flux:time-picker min="now" />  <!-- Only future times -->
```

Need to block out specific times or time ranges? Use the `unavailable` prop to disable booked appointments or unavailable slots:

```blade
<flux:time-picker unavailable="03:00,04:00,05:30-07:29" />
```

[See more constraint options →](/components/time-picker#min/max-times)

## Multiple time selection

Allow users to select multiple times with the `multiple` prop:

```blade
<flux:time-picker multiple wire:model="availableTimes" />
```

## Automatic localization

The time picker automatically uses the browser's locale to determine time format, but you can override it:

```blade
<flux:time-picker time-format="12-hour" />
<flux:time-picker time-format="24-hour" />
<flux:time-picker locale="ja-JP" />
```

## The details

Like every component in Flux, we left no stone unturned:

**Keyboard friendly**: Full keyboard navigation with arrow keys, Enter to select, and Escape to close. Screen readers announce all state changes and available options.

**Smart defaults**: The picker opens to the currently selected time, or the current time if nothing is selected. You can override this with `open-to` if needed.

**Seamless integration**: Works with all standard field props like `label`, `description`, and `badge` for automatic field wrapping.

---

[Explore the Time Picker documentation →](https://fluxui.dev/components/time-picker)