Reka | Reka UI

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultPlaceholder`		`TimeValue` The default placeholder date
`defaultValue`		`TimeValue` The default value for the calendar
`dir`		`'ltr' \| 'rtl'` The reading direction of the time field when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean` Whether or not the time field is disabled
`granularity`		`'hour' \| 'minute' \| 'second'` The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity
`hideTimeZone`		`boolean` Whether or not to hide the time zone segment of the field
`hourCycle`		`12 \| 24` The hour cycle used for formatting times. Defaults to the local preference
`id`		`string` Id of the element
`locale`		`string` The locale to use for formatting dates
`maxValue`		`TimeValue` The maximum date that can be selected
`minValue`		`TimeValue` The minimum date that can be selected
`modelValue`		`TimeValue \| null` The controlled checked state of the field. Can be bound as `v-model`.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`placeholder`		`TimeValue` The placeholder date, which is used to determine what time to display when no time is selected. This updates as the user navigates the field
`readonly`	`false`	`boolean` Whether or not the time field is readonly
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`step`		`DateStep` The stepping interval for the time fields. Defaults to `1`.

Emit	Payload
`update:modelValue`	`[date: TimeValue]` Event handler called whenever the model value changes
`update:placeholder`	`[date: TimeValue]` Event handler called whenever the placeholder value changes

Slots (default)	Payload
`modelValue`	`TimeValue \| undefined` The current time of the field
`segments`	`{ part: SegmentPart; value: string; }[]` The time field segment contents
`isInvalid`	`boolean` Value if the input is invalid

Methods	Type
`setFocusedElement`	`(el: HTMLElement) => void` Helper to set the focused element inside the DateField