Time picker

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

The time picker displays a grid of selectable times. Time pickers can be set to a specific time or used to choose from preset alternatives, and can be combined with date pickers for full datetime selection.

Anatomy

Label: the label is left-aligned above the input area.
Time input field: clicking this field opens a dropdown menu of available times for the selected date.
Description: this field helps users understand what is needed for this interaction.
Dropdown arrow: this icon helps users understand that we have a dropdown menu in this component.
Time dropdown: this is how the dropdown menu looks showing the available times for the selected date.

States

Enabled
Hover
Focused
Selected
Error
Error focused
Read only
Disabled

Example
HTML

Label

Change this to a short description

Label

Change this to a short description

Label

Change this to a short description

Label

Change this to a short description

Label

Change this to a short description

Label

Change this to a short description

Label

Change this to a short description

Label

Change this to a short description

development/documentation/docs/timepicker/examples/states.html

<div class="d-flex flex-wrap gap-24">
	<!-- 1. Enabled -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">1</span>
		<label for="tpStateEnabled">Label</label>
		<div class="timepicker-wrapper">
			<input type="text" class="form-control timepicker" id="tpStateEnabled" placeholder="HH:MM" aria-describedby="tpStateEnabledHelp" required autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateEnabledHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 2. Hover -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">2</span>
		<label for="tpStateHover">Label</label>
		<div class="timepicker-wrapper">
			<input type="text" class="form-control timepicker hover" id="tpStateHover" placeholder="HH:MM" aria-describedby="tpStateHoverHelp" required autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateHoverHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 3. Focused -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">3</span>
		<label for="tpStateFocused">Label</label>
		<div class="timepicker-wrapper">
			<input type="text" class="form-control timepicker focus" id="tpStateFocused" placeholder="HH:MM" aria-describedby="tpStateFocusedHelp" required autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateFocusedHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 4. Selected — inner wrapper carries `.selected` (the static-state alias)
	     to render the open-dropdown trigger appearance. `.show` is the live
	     class toggled by the page JS on `showTimepicker` / `hideTimepicker`;
	     using `.selected` here keeps the demo state intact after a user
	     interacts with this cell. Both classes route to the same SCSS rule. -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">4</span>
		<label for="tpStateSelected">Label</label>
		<div class="timepicker-wrapper selected">
			<input type="text" class="form-control timepicker" id="tpStateSelected" value="09:15" aria-describedby="tpStateSelectedHelp" required autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateSelectedHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 5. Error -->
	<div class="form-group required has-error docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">5</span>
		<label for="tpStateError">Label</label>
		<div class="timepicker-wrapper">
			<input type="text" class="form-control timepicker" value="09:15" id="tpStateError" aria-describedby="tpStateErrorHelp" required autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateErrorHelp" class="help-block"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Change this to a short description</span>
	</div>

	<!-- 6. Error focused -->
	<div class="form-group required has-error docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">6</span>
		<label for="tpStateErrorFocused">Label</label>
		<div class="timepicker-wrapper">
			<input type="text" class="form-control timepicker focus" value="09:15" id="tpStateErrorFocused" aria-describedby="tpStateErrorFocusedHelp" required autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateErrorFocusedHelp" class="help-block"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Change this to a short description</span>
	</div>

	<!-- 7. Read only -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">7</span>
		<label for="tpStateReadonly">Label</label>
		<div class="timepicker-wrapper">
			<input type="text" class="form-control timepicker" value="09:15" id="tpStateReadonly" aria-describedby="tpStateReadonlyHelp" readonly autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown" disabled tabindex="-1">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateReadonlyHelp" class="help-block">Change this to a short description</span>
	</div>

	<!-- 8. Disabled -->
	<div class="form-group required docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">8</span>
		<label for="tpStateDisabled">Label</label>
		<div class="timepicker-wrapper">
			<input type="text" class="form-control timepicker" id="tpStateDisabled" placeholder="HH:MM" aria-describedby="tpStateDisabledHelp" disabled autocomplete="off">
			<button type="button" class="timepicker-btn" aria-label="Open time dropdown" disabled tabindex="-1">
				<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
			</button>
		</div>
		<span id="tpStateDisabledHelp" class="help-block">Change this to a short description</span>
	</div>
</div>

Content guidelines

To ensure users see dates and times in a familiar format, make sure the locale is set appropriately. Use a clear label to indicate what the date and time selections refer to.

Example
HTML

Label

Change this to a short description

development/documentation/docs/timepicker/examples/content-guidelines.html

<div class="form-group required docs-form-state-width">
	<label for="tpContentGuidelines">Label</label>
	<div class="timepicker-wrapper">
		<input type="text" class="form-control timepicker" id="tpContentGuidelines" placeholder="HH:MM" aria-describedby="tpContentGuidelinesHelp" required autocomplete="off">
		<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
			<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
		</button>
	</div>
	<span id="tpContentGuidelinesHelp" class="help-block">Change this to a short description</span>
</div>

Clickable area

Making the entire field of a time picker clickable is essential for usability and accessibility. It creates a more efficient and forgiving experience for all users.

Accessibility

Keyboard interaction

All components should be reachable via Tab and Shift+Tab keys.

Example
HTML

Label

Change this to a short description

development/documentation/docs/timepicker/examples/accessibility.html

<div class="form-group required docs-form-state-width">
	<label for="tpAccessibility">Label</label>
	<div class="timepicker-wrapper">
		<input type="text" class="form-control timepicker focus" id="tpAccessibility" placeholder="HH:MM" aria-describedby="tpAccessibilityHelp" required autocomplete="off">
		<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
			<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
		</button>
	</div>
	<span id="tpAccessibilityHelp" class="help-block">Change this to a short description</span>
</div>

Specs

Time picker specifications with spacing, click-area and radius annotations

Developer reference

The following sections describe supported functionality that is not part of the Figma design specification.

Third-party plugin. The interactive time picker example below is wired up using the jQuery timepicker plugin (timepicker.js). Spiris ships CSS only — no JavaScript is bundled. To run this example, consuming applications load timepicker.js alongside the Spiris stylesheet.

With input

An input with a dropdown menu of selectable times. Clicking the field or the chevron-down trigger opens the dropdown.

Example
HTML

development/documentation/docs/timepicker/examples/inputs-timepicker.html

<div class="row">
	<form class="col-md-6">
		<div class="form-group">
			<label for="timeExample">Select time</label>
			<div class="timepicker-wrapper">
				<input class="form-control timepicker" id="timeExample" placeholder="HH:MM" autocomplete="off" type="text">
				<button type="button" class="timepicker-btn" aria-label="Open time dropdown">
					<span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
				</button>
			</div>
		</div>
	</form>
</div>