Time Field

Time input with editable segments (hour, minute, AM/PM), locale-aware.

Import

import { TimeField } from '@marbleui/ui'

Props

<TimeField>

Prop	Type	Default
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (104).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria DateInput · React Aria DateSegment · React Aria TimeField. Follow the primitive's docs for the full keyboard map.

Usage notes

Time input with editable segments (hour, minute, AM/PM). For a date use DateField; for date and time together use DateField with granularity="minute".

<TimeField label="Opens" defaultValue={new Time(9, 0)} />
<TimeField label="Alarm" hourCycle={24} granularity="second" variant="filled" />

Values are Time objects from @internationalized/date. Uncontrolled: defaultValue. Controlled: value + onChange.
hourCycle is 12 or 24 (default follows the locale); granularity is hour, minute or second.
Supports minValue, maxValue, isRequired and errorMessage.
Without a visible label, pass aria-label.

Example source · show

import { Time } from '@internationalized/date'
import { TimeField } from './time-field'

export const styles = {
  Outline: () => (
    <div className="flex gap-3">
      <TimeField className="w-32" label="Opens" defaultValue={new Time(9, 0)} />
      <TimeField className="w-32" label="Closes" defaultValue={new Time(17, 30)} />
    </div>
  ),
  '24-hour': () => <TimeField className="w-40" variant="filled" label="Alarm" hourCycle={24} granularity="second" defaultValue={new Time(6, 45, 0)} />,
}

Source: packages/ui/src/time-field/time-field.tsx

Catalog

Category: date-time
Priority: Core
Primitive: react-aria
React Aria: TimeField