Time Range Field

Segmented time range input.

Usage

value is { start, end }, and you render two Inputs — one type="start" and one type="end". type is required; there is no single input that holds a range.

Put the visual separator between them yourself and mark it aria-hidden — a dash read aloud between two times adds nothing.

Opening hours

––––AM

You must name the Root

Bits gives the range Root role="group" with no accessible name. Without your help the field announces as an anonymous group.

Verified in the rendered DOM: Bits points each Input's aria-labelledby at your Label, but the Inputs carry no role — so nothing exposed to assistive technology ends up labelled. On the single-value Time Field the Input is the group and Bits does label it, so this gap is specific to ranges.

Pass aria-labelledby pointing at your Label's id, or aria-label. Both reach the root element, and both directions are asserted in the tests so this cannot regress quietly.

Shared with Time Field

Segment is the same component Time Field uses — Bits re-exports the identical module to both namespaces, so one styled implementation serves each and the two cannot drift apart. Everything in that page's "why not a native input" section applies here too.

Props

TimeRangeField.Root — value and placeholder are bindable.

Prop	Type	Default
`value` The time value range. Bindable. A `TimeValue`, not a JS `Date`.	`{ start: TimeValue \| undefined; end: TimeValue \| undefined }`	—
`onValueChange` Called when the value changes.	`(value: FieldValue) => void`	—
`placeholder` Which time the empty segments are formatted from. Bindable.	`Time \| CalendarDateTime \| ZonedDateTime`	—
`minValue` Earliest accepted value.	`Time \| CalendarDateTime \| ZonedDateTime`	—
`maxValue` Latest accepted value.	`Time \| CalendarDateTime \| ZonedDateTime`	—
`granularity` Smallest unit the user can edit, which decides which segments appear.	`'hour' \| 'minute' \| 'second'`	`'minute'`
`hourCycle` 12- or 24-hour clock. Leave it unset to follow the locale — hardcoding 12 is wrong for most of the world.	`12 \| 24`	—
`locale` BCP-47 locale. It decides the SEGMENT ORDER — month/day/year versus day/month/year — so getting it wrong does not just relabel the field, it rearranges it. Pass the user's locale.	`string`	`'en'`
`name` Name for form submission; Bits renders a hidden input.	`string`	—
`required`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readonly`	`boolean`	`false`
`validate` Return a message to mark the value invalid. Bits then sets `data-invalid` and wires `aria-invalid` on the segments.	`(value: never) => string \| string[] \| void`	—
`class` Extra classes merged onto the root.	`string`	—
`children`	`Snippet`	—

Input takes a required type of "start" or "end". Label and Segment take class plus their native attributes.