Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UI ARC Radiant Components
v4.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

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

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.
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.
step 1 | 5 | 15 | 30 1
Minute step increment. Controls the granularity of minute options shown in the dropdown. Unrecognised values fall back to 1.
format '12h' | '24h' '12h'
Display format: "12h" shows hours 1-12 with an AM/PM column, "24h" shows hours 0-23 without AM/PM. Unrecognised values fall back to "12h".
open boolean false
Whether the time dropdown is visible. Reflected so it can be opened programmatically or styled from CSS. Held at false while disabled.
size 'sm' | 'md' | 'lg' 'md'
Control size. md is the default; sm and lg scale the field padding.
formAssociated boolean true
properties object { // flag(), unlike `disabled`. The exclusion in props.js is specifically // about form-associated *platform* semantics: a `disabled` content // attribute that is merely present makes the element actually disabled // per the HTML spec, and formDisabledCallback assigns the property back, // so no converter can win. Neither of these is platform-mapped — // `required` is enforced by _computeValidity() below and `readonly` by // each component's own interaction handlers — so the stock converter buys // nothing here and costs the usual bug: `required="false"` read as true, // blocking submission of a form the author meant to leave optional. // Finding #48's shape, across all 26 form controls at once. required: flag(false), readonly: flag(false), }
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

Methods

checkValidity() boolean
Whether the control currently satisfies its constraints, per the native constraint-validation API. Fires invalid on the element when it does not, and reports nothing to the user.
reportValidity() boolean
As checkValidity(), but also shows the browser's validation message against the control when it fails.

Events

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

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy