Time picker

A time picker helps users select a specific time.

This component requires the following JavaScript plugin:

Combobox

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Appointment time

hh:mm

Twig

<div x-combobox class="max-w-lg">
	<label x-combobox:label for="timepicker" class="block">Appointment time</label>
	<div id="input-hint" class="text-gray-50">hh:mm</div>

	<select id="timepicker" x-combobox:values>
		{% for combobox in comboboxes %}
			<option value="{{- combobox.value -}}">{{- combobox.label -}}</option>
		{% endfor %}
	</select>

	<template x-if="$combobox.isLoaded">
		<div class="relative mt-2 max-w-40">
			<div class="flex w-full">
				<input x-combobox:input class="pr-10 p-2 w-full h-10 border border-gray-60 focus:outline focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4" aria-describedby="input-hint">
				<div class="absolute z-10 inset-y-0 right-0 flex">
					<button x-combobox:clear class="h-full px-1 flex items-center focus:outline focus:-outline-offset-4 focus:outline-4 focus:outline-blue-40v/60 bg-transparent">
						<div class="icon-[material-symbols--close] size-6 align-middle text-gray-50"></div>
					</button>
					<button x-combobox:toggle class="h-full px-1 flex items-center focus:outline focus:-outline-offset-4 focus:outline-4 focus:outline-blue-40v/60 bg-transparent">
						<div class="icon-[material-symbols--expand-more] size-8 align-middle text-gray-50"></div>
					</button>
				</div>
			</div>
			<ul x-combobox:list class="absolute border border-t-0 border-gray-60 bg-white max-h-52 overflow-y-scroll w-full z-10">
				<template x-for="option in $combobox.allOptions" :key="option.value">
					<li x-combobox:item class="p-2 cursor-pointer aria-selected:bg-blue-60v aria-selected:text-white data-[active]:outline data-[active]:outline-4 data-[active]:outline-blue-40v data-[active]:-outline-offset-4" x-text="option.label"></li>
				</template>
				<template x-if="$combobox.noResults">
					<li class="p-2 cursor-not-allowed">
						No results found
					</li>
				</template>
			</ul>
		</div>
	</template>
</div>

Keyboard Interactions

Down Arrow
When focus is on an Combobox Input, opens the Combobox List and moves focus on the currently selected that Combobox Item. Otherwise, moves focus to the first Combobox Item.

When focus is on an Combobox Item, moves focus to the previous focusable element.

When focus is on the first Combobox Item in a Combobox List, moves focus to the Combobox Input.
Up Arrow
When focus is on an Combobox Input, opens the Combobox List and moves focus on the currently selected that Combobox Item. Otherwise, moves to the last Combobox Item.

When focus is on an Combobox Item, moves focus to the next focusable element.

When focus is on the last Combobox Item in a Combobox List, focus moves to the Combobox Input.
Enter
When focus is on an Combobox Item, selects the current value and sets the cursor at the end of the selected value in the Combobox Input.
Escape
When the Combobox List is open, closes the Combobox List and moves focus to the Combobox Input.

Progressive Enhancement

Because this component heavily relies on Javascript, in environments where Javascript isn’t present or hasn’t yet loaded, this component falls back to the native <select> element. When Javascript is loaded, the <select> element will be hidden and all options will be passed to the Combobox component.

This ensures that users will always be able to interact with a functional component regardless of their connectivity or browser settings.