TimePicker

Alpha

An accessible time input with 12-hour and 24-hour format support, step intervals, and spinbutton keyboard pattern.

Import

import { TimePicker } from "@compa11y/react";

Usage

Example.tsx

import { useState } from "react";
import { TimePicker, Text } from "@compa11y/react";

function MeetingTime() {
  const [time, setTime] = useState({ hours: 9, minutes: 0 });

  return (
    <div>
      <Text as="label" size="sm" weight="semibold">Meeting time</Text>
      <TimePicker
        value={time}
        onValueChange={setTime}
        format="12h"
        step={15}
        label="Meeting time"
      />
    </div>
  );
}

Features

12-hour (AM/PM) and 24-hour format
Step interval for minutes
role='spinbutton' on each segment (hours, minutes, AM/PM)
Arrow key increment/decrement per segment
Screen reader announcements for time changes

Props

TimePicker component props
Prop	Type	Default	Description
`value`	`{ hours?: number; minutes?: number; seconds?: number }`	-	Controlled time value
`onValueChange`	`(value: TimePickerValue) => void`	-	Called when time changes
`format`	`'12h' \| '24h'`	`'12h'`	Time format
`step`	`number`	`1`	Minute step interval
`disabled`	`boolean`	`false`	Disables the time picker
`label`	`string`	-	Accessible label

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for TimePicker
Key	Action
`ArrowUp / ArrowDown`	Increment/decrement the focused segment
`ArrowLeft / ArrowRight`	Move between segments (hours, minutes, AM/PM)
`Tab`	Move between time segments