Time Picker

TimePicker is a field with an hour, a minute and, on a twelve-hour clock, a period. Tab to a part and type, or use the up and down arrows or the buttons:

▲

9

▼

▲

30

▼

AM

Stored as 9:30

TimePickerDemo.tsx

import { Paragraph, View } from '@hozo/core'
import { TimePicker } from '@hozo/ui'
import { useState } from 'react'

type Time = { hour: number; minute: number }

export function TimePickerDemo() {
  const [time, setTime] = useState<Time | null>({ hour: 9, minute: 30 })
  return (
    <View className="items-start gap-3">
      <TimePicker
        accessibilityLabel="Arrival time"
        locale="en-US"
        hour12
        step={15}
        value={time}
        onChange={setTime}
      />
      <Paragraph className="text-sm text-hozo-text-body">
        {time ? `Stored as ${time.hour}:${String(time.minute).padStart(2, '0')}` : 'No time'}
      </Paragraph>
    </View>
  )
}

• value and onChange hold { hour, minute }. hour is 0 to 23 even on a twelve-hour clock, which is only a way of writing it.
• Each part is a spinbutton with its own name: hourFieldLabel, minuteFieldLabel and periodFieldLabel. A reader hears its value, and the arrows change it.
• step is how many minutes the arrows move. It does not refuse a typed minute between steps, because rounding what someone typed would lose it.
• hour12 chooses the clock. By default locale decides.
• min and max bound the time.