Time Field
Edit and validate a timezone-free wall-clock time.
Usage
Wall clock
Edit a timezone-free hour and minute value.
Selected time9:30 AM
<!-- Time Field / Wall Clock -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeField } from '@sectile/vue/time-field'
const value = ref({ hour: 9, minute: 30, second: 0, millisecond: 0 })
</script>
<template>
<label>
<span>Start time</span>
<TimeField v-model="value" />
</label>
</template>Stepped
Accept values only at the configured interval.
Selected time9:30 AM
<!-- Time Field / Stepped -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeField } from '@sectile/vue/time-field'
const value = ref({ hour: 9, minute: 30, second: 0, millisecond: 0 })
const policies = { step: { minute: 15 } }
</script>
<template>
<label>
<span>Start time</span>
<TimeField v-model="value" :policies="policies" />
</label>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Selected time9:30 AM
<!-- Time Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeField } from '@sectile/vue/time-field'
const value = ref({ hour: 9, minute: 30, second: 0, millisecond: 0 })
</script>
<template>
<label>
<span>Start time</span>
<TimeField v-model="value" />
</label>
</template>API
Vue package: @sectile/vue/temporal/time-field
TimeField
Props
TimeFieldProps
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
labelAccessible name announced for the control.
modelValueCurrent value when state is controlled by the parent.
nativeWhether to use the browser native date or time input UI.
policiesBehavior policies that customize validation, movement, or selection.
readonlyWhether the value can be inspected but not changed.
requiredWhether the control must contain a valid value before submission.
Other types
TimeValue
type TimeValue = NonNullable<TimeFieldOptions['value']>TimeFieldValueChangeHandler
type TimeFieldValueChangeHandler = (value: TimeValue | null) => voidParts
Shared scope: [data-scope="time-field"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
input | [data-part="input"] | Accepts the editable value or draft. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Arrow Up / Arrow Down | Increment or decrement the active value segment. |
| Enter | Commit the draft value. |
| Escape | Cancel the draft and restore the accepted value. |
Accessibility
The labeled input preserves native text entry while exposing time validation as one value.