TimeField

A segmented time input field. Each part (hour, minute, second) is an individually editable segment.

Example

Time

0230PM

Value: 14:30

Root Props

Prop	Type	Default	Description
`value`	`TimeValue`	—	Current time value, bindable
`onValueChange`	`(value) => void`	—	Called when value 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

Sub-components

Component	Key Props	Description
`TimeField.Label`	`class`	Label for the field
`TimeField.Input`	`name`, `class`	Container that auto-renders time segments
`TimeField.Segment`	`part`, `class`	Individual editable time segment

Usage

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

  let value = $state(new Time(14, 30));
</script>

<TimeField.Root bind:value>
  <TimeField.Label>Time</TimeField.Label>
  <TimeField.Input />
</TimeField.Root>