TimeField

A time field is a DateField for the clock half: the same segmented typing, the same parts under different names, applied to hours, minutes and seconds.

import { Label, TimeField, TimeFieldGroup, TimeFieldInput, TimeFieldSegment } from "ropav";

Start time

⁦––:––⁩ AM

time-field-basic.vue

<script setup lang="ts">
import { Label, TimeField, TimeFieldGroup, TimeFieldInput, TimeFieldSegment } from "ropav";
</script>

<template>
  <TimeField class="field" name="time">
    <Label>Start time</Label>
    <TimeFieldGroup>
      <TimeFieldInput>
        <template #default="{ segment }">
          <TimeFieldSegment :segment />
        </template>
      </TimeFieldInput>
    </TimeFieldGroup>
  </TimeField>
</template>

<style scoped>
.field {
  width: calc(var(--rp-spacing) * 64);
}
</style>

Whether there is an AM/PM segment is the locale's decision, not yours: a 12-hour locale gets one and a 24-hour locale does not, from the same markup. granularity chooses how far down the segments go, so a field that only wants hours and minutes need not show seconds.

min-value and max-value bound the time, which is how an opening-hours field stops somebody booking at three in the morning.

Accessibility

• Each segment is a spin button. Arrows change the value under the cursor, and typing 9 in an hour segment moves on by itself rather than waiting for a second digit.
• The AM/PM segment is a segment like any other — arrows toggle it — so a reader never has to reach for a separate control to switch it.
• Name the field. "Start time" says what the clock is for; a bare time field beside another one leaves a reader guessing which end of the range they are in.

API

Prop	Type	Default	Description
ariaDescribedby	string	—
ariaLabel	string	—
ariaLabelledby	string	—
autoFocus	boolean	—	Whether the first segment takes focus as the field appears.
defaultValue	TimeValue | null	—	The time the field starts with while it owns its own value.
form	string	—	Id of the form the value belongs to, when it is not an ancestor.
fullWidth	boolean	—	Whether the field stretches to fill its container.
granularity	"hour" | "minute" | "second"	"minute"	The smallest part of a time the field shows.
hideTimeZone	boolean	—	Whether the time zone abbreviation is hidden.
hourCycle	12 | 24	—	Whether to show a 12 or 24 hour clock. Taken from the locale when unset.
id	string	—	Id for the group around the segments, which is what a label points at.
isDisabled	boolean	—
isInvalid	boolean	—	Whether the field reads as invalid regardless of what it holds.
isReadOnly	boolean	—
isRequired	boolean	—
locale	string	—	Overrides the locale in force, for a field that must not follow its surroundings.
maxValue	TimeValue | null	—
minValue	TimeValue | null	—
name	string	—	Name the value is submitted under.
placeholderValue	TimeValue | null	—	A time whose shape the placeholder follows. Defaults to midnight.
shouldForceLeadingZeros	boolean	—	Whether the hour is always padded to two digits. Taken from the locale when unset.
validate	((value: TimeValue | null) => string | true | string[] | null | undefined)	—	Extra rule the value has to satisfy, beyond the range.
validationBehavior	"aria" | "native"	"native"	Whether errors go through the browser or through ARIA alone.
value	TimeValue | null	—	The time the field shows. Set this and the caller owns the value.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isInvalid	boolean
isReadOnly	boolean
isRequired	boolean

Event	Payload
change	TimeValue | null
focusChange	boolean
update:value	TimeValue | null