Time Picker — ARC UI

Components

Time Picker

input

interactive

<arc-time-picker>

Overview

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

Use TimePicker for duration input -- use a number input with minutes or a dedicated duration component instead
Allow the user to type directly into the input; it is read-only by design to ensure valid time formats
Set min greater than max, as this will disable all options and make the picker unusable
Forget to handle the arc-change event -- without it, the selected time is not captured
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
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';

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

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

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

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

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

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

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

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

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

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

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

<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

Prop	Type	Default	Description
`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.
`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.

Events

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

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight