TimeRangeField

A segmented time range input with start and end time segments. Each part of both times is individually editable.

Example

Time range

0900AM

–

0500PM

Range: 09:00 to 17:00

Root Props

Prop	Type	Default	Description
`value`	`{ start: TimeValue; end: TimeValue }`	—	Selected time range, bindable
`onValueChange`	`(value) => void`	—	Called when range changes
`placeholder`	`TimeValue`	—	Placeholder time, bindable
`minValue`	`TimeValue`	—	Minimum allowed time
`maxValue`	`TimeValue`	—	Maximum allowed time
`disabled`	`boolean`	`false`	Disable the field
`readonly`	`boolean`	`false`	Make the field read-only
`locale`	`string`	`'en'`	Locale for segment formatting
`granularity`	`'hour' \| 'minute' \| 'second'`	—	Finest unit to display
`hourCycle`	`12 \| 24`	—	12 or 24-hour time format
`hideTimeZone`	`boolean`	`false`	Hide time zone segment
`required`	`boolean`	`false`	Mark as required
`onStartValueChange`	`(value) => void`	—	Called when start time changes
`onEndValueChange`	`(value) => void`	—	Called when end time changes

Sub-components

Component	Key Props	Description
`TimeRangeField.Label`	`class`	Label for the field
`TimeRangeField.Input`	`type`, `name`, `class`	Segmented time input for start or end (`type="start" \| "end"`)
`TimeRangeField.Segment`	`part`, `class`	Individual time segment

Usage

<script>
  import { TimeRangeField } from '@chrissnell/chonky-ui';
  import { Time } from '@internationalized/date';

  let value = $state({
    start: new Time(9, 0),
    end: new Time(17, 0)
  });
</script>

<TimeRangeField.Root bind:value>
  <TimeRangeField.Label>Time range</TimeRangeField.Label>
  <div style="display: flex; align-items: center; gap: 0.25rem;">
    <TimeRangeField.Input type="start" />
    <span class="time-range-field-separator">–</span>
    <TimeRangeField.Input type="end" />
  </div>
</TimeRangeField.Root>