Time Picker

Scrollable column-based time picker with 12h/24h format support.

Components

Time Picker

input

interactive

<arc-time-picker>

Overview

TimePicker provides a column-based time selection interface that combines a read-only text input with a dropdown panel containing scrollable hour and minute columns. In 12h mode a third AM/PM column is shown. Clicking the input toggles the dropdown where users can independently select hours and minutes by clicking options styled as buttons inside scrollable lists. The selected time is displayed in the input in the chosen format (e.g. "2:30 PM" in 12h mode or "14:30" in 24h mode), while the underlying `value` property always stores the time in 24-hour "HH:MM" format for consistent data handling. The `step` property controls the minute increment (1, 5, 15, or 30) to reduce the number of options when fine-grained selection is unnecessary. The `min` and `max` properties constrain the selectable range — time options outside this range appear dimmed and are non-interactive. When a complete time is selected (both hour and minute), the component dispatches an `arc-change` event with the 24-hour time string in the detail. Clicking outside the component or pressing Escape closes the dropdown and returns focus to the input. The dropdown uses a slide-down entrance animation that respects `prefers-reduced-motion`. Arrow keys navigate within columns, Tab moves between columns, and Enter confirms a selection.

Guidelines

When to use

Set step to 5 or 15 for most scheduling use cases to reduce cognitive load
Provide a descriptive label like "Start Time" or "Appointment Time" for accessibility
Use the 24h format value for form submission and API communication, not the display format
Set min and max to constrain the time range when context requires it (e.g. business hours only)
Listen to arc-change to capture the selected time and validate it against business rules
Set the initial value property when editing an existing record so the columns open to the correct selection

When not to use

Do not use TimePicker for duration input — use a number input with minutes or a dedicated duration component instead
Do not allow the user to type directly into the input; it is read-only by design to ensure valid time formats
Do not set min greater than max, as this will disable all options and make the picker unusable
Do not forget to handle the arc-change event — without it, the selected time is not captured
Do not place TimePicker inside a container with overflow: hidden, as the dropdown will be clipped

Features

Scrollable hour and minute columns for intuitive time selection
12-hour and 24-hour display format with automatic AM/PM column in 12h mode
Value always stored in 24-hour "HH:MM" format regardless of display format
Configurable minute step increment (1, 5, 15, 30) to control granularity
Min and max time constraints that disable out-of-range options visually
Full keyboard navigation: Arrow keys within columns, Tab between columns, Enter to select
Escape key and outside-click dismissal with focus restoration to the input
Animated dropdown entrance with `prefers-reduced-motion` support

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-time-picker label="Start Time" placeholder="Pick a time" step="15"></arc-time-picker>

import { TimePicker } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <TimePicker label="Start Time" placeholder="Pick a time" step={15} />
  );
}

<script setup>
import { TimePicker } from '@arclux/arc-ui-vue';
</script>

<template>
  <TimePicker label="Start Time" placeholder="Pick a time" :step="15" />
</template>

<script>
  import { TimePicker } from '@arclux/arc-ui-svelte';
</script>

<TimePicker label="Start Time" placeholder="Pick a time" step={15} />

import { Component } from '@angular/core';
import { TimePicker } from '@arclux/arc-ui-angular';

@Component({
  imports: [TimePicker],
  template: `
    <arc-time-picker label="Start Time" placeholder="Pick a time" [step]="15"></arc-time-picker>
  `,
})
export class MyComponent {}

import { TimePicker } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <TimePicker label="Start Time" placeholder="Pick a time" step={15} />
  );
}

import { TimePicker } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <TimePicker label="Start Time" placeholder="Pick a time" step={15} />
  );
}

<link rel="stylesheet" href="@arclux/arc-ui/css/arc-ui.css" />
<link rel="stylesheet" href="@arclux/arc-ui/css/time-picker.css" />

<arc-time-picker label="Start Time" placeholder="Pick a time" step="15"></arc-time-picker>

<!-- TimePicker requires JavaScript for the dropdown interaction.
     Use the Web Component or a framework wrapper. -->
<arc-time-picker label="Start Time" placeholder="Pick a time" step="15"></arc-time-picker>

API

size 'sm' | 'md' | 'lg' ='md': Control size. `md` is the default; `sm` and `lg` scale the field padding.
value string ='': The selected time in 24-hour "HH:MM" format (e.g. "14:30"). Set this to pre-select a time. Updated when the user picks a time.
name string =''
min string ='': Minimum selectable time in "HH:MM" 24-hour format. Times before this are visually dimmed and non-interactive.
max string ='': Maximum selectable time in "HH:MM" 24-hour format. Times after this are visually dimmed and non-interactive.
step number =1: Minute step increment (1, 5, 15, or 30). Controls the granularity of minute options shown in the dropdown.
format string ='12h': Display format: "12h" shows hours 1-12 with an AM/PM column, "24h" shows hours 0-23 without AM/PM.
placeholder string ='Select time': Placeholder text displayed in the input when no time is selected.
disabled boolean =false: Disables the time picker, reducing opacity and preventing the dropdown from opening.
label string ='': Label text rendered above the input in uppercase accent font styling.
open boolean =false: Whether the time dropdown is visible. Reflected so it can be opened programmatically or styled from CSS.
formAssociated boolean =true
properties object ={ required: { type: Boolean, reflect: true }, readonly: { type: Boolean, reflect: true }, }: Lit merges static properties up the prototype chain, so every consumer gets these without declaring them. `required` participates in constraint validation below; `readonly` reflects for styling and is enforced by each component's interaction handlers (the mixin can't know which gestures mutate state).
autoValidates boolean =true: Components that run their own constraint-validation logic (pattern checks, range checks) opt out of the automatic required sync by overriding this to false, and own the whole validity flag set instead.
form
validity
validationMessage
required boolean =false
readonly boolean =false

Events

arc-change detail: { value: string }: Fired when a time is selected. Detail contains { value: "HH:MM" } in 24-hour format.

Time Picker

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight