Time Range Field
Edit start and end times while enforcing interval and order rules.
Usage
Office hours
Choose a start and end time constrained to ordinary office hours.
Office hours9:30 AM – 5:45 PM
<!-- Time Range Field / Office Hours -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeRangeFieldEndInput, TimeRangeFieldRoot, TimeRangeFieldStartInput } from '@sectile/vue/temporal/time-range-field'
const hours = ref({ start: { hour: 9, minute: 30 }, end: { hour: 17, minute: 45 } })
</script>
<template>
<TimeRangeFieldRoot v-model="hours">
<label>Opens <TimeRangeFieldStartInput name="opens" /></label>
<label>Closes <TimeRangeFieldEndInput name="closes" /></label>
</TimeRangeFieldRoot>
</template>Stepped
Accept values only at the configured interval.
Office hours9:30 AM – 5:45 PM
<!-- Time Range Field / Stepped -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeRangeFieldEndInput, TimeRangeFieldRoot, TimeRangeFieldStartInput } from '@sectile/vue/temporal/time-range-field'
const hours = ref({ start: { hour: 9, minute: 30 }, end: { hour: 17, minute: 45 } })
const policies = { step: { minute: 15 } }
</script>
<template>
<TimeRangeFieldRoot v-model="hours" :policies="policies">
<label>Opens <TimeRangeFieldStartInput name="opens" /></label>
<label>Closes <TimeRangeFieldEndInput name="closes" /></label>
</TimeRangeFieldRoot>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Office hours9:30 AM – 5:45 PM
<!-- Time Range Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeRangeFieldEndInput, TimeRangeFieldRoot, TimeRangeFieldStartInput } from '@sectile/vue/temporal/time-range-field'
const hours = ref({ start: { hour: 9, minute: 30 }, end: { hour: 17, minute: 45 } })
</script>
<template>
<TimeRangeFieldRoot v-model="hours">
<label>Opens <TimeRangeFieldStartInput name="opens" /></label>
<label>Closes <TimeRangeFieldEndInput name="closes" /></label>
</TimeRangeFieldRoot>
</template>API
Vue package: @sectile/vue/temporal/time-range-field
TimeRangeFieldRootTimeRangeFieldStartInputTimeRangeFieldEndInput
Props
TimeRangeFieldRootProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
endLabelAccessible label for the range end input.
modelValueCurrent value when state is controlled by the parent.
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.
startLabelAccessible label for the range start input.
Slots
TimeRangeFieldRootSlotProps
activeWhether this item is currently active.
disabledWhether interaction is unavailable.
endTextFormatted text for the range end value.
readonlyWhether the value can be inspected but not changed.
startTextFormatted text for the range start value.
valueCurrent value exposed by this contract.
Events
TimeRangeFieldRoot
update:modelValueEmitted when the component requests a new controlled value.
Other types
TimeRangeFieldValueChangeHandler
type TimeRangeFieldValueChangeHandler = (value: TimeRange | null) => voidTimeRange
| Name | Type | Required |
|---|---|---|
start | TimeValue | Yes |
end | TimeValue | Yes |
Parts
Shared scope: [data-scope="time-range-field"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
root | [data-part="root"] | Defines the component boundary and owns its composed parts. | — |
start-input | [data-part="start-input"] | Edits the start value. | — |
end-input | [data-part="end-input"] | Edits the end value. | — |
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
Separate labeled start and end inputs expose one ordered time range and keep endpoint errors visible.