TimeField

A time field allows users to enter a time value using individually editable segments for hours, minutes, and optionally seconds. Each segment supports keyboard input with arrow keys for incrementing and decrementing.

Import

import { TimeField } from '@proyecto-viviana/solid-spectrum';
import { type TimeValue } from '@proyecto-viviana/solid-stately';

Basic Usage

A simple time field with a label. Click on a segment and use arrow keys or type numbers to set the time.

Entered time: None

const [time, setTime] = createSignal<TimeValue | null>(null);

<TimeField
  label="Meeting time"
  value={time()}
  onChange={setTime}
/>

<p>Selected: {formatTime(time())}</p>

With Description

Add a description to provide context about the expected time value.

<TimeField
  label="Start time"
  description="Business hours: 9 AM - 5 PM"
/>

Required Field

Mark the time field as required for form validation. An asterisk indicator appears next to the label.

<TimeField
  label="Appointment time"
  isRequired
/>

Disabled State

A disabled time field cannot be interacted with. The segments and field are visually muted.

<TimeField
  label="Fixed time"
  isDisabled
/>

Props

Prop	Type	Default	Description
`label`	string	—	Label text displayed above the time input
`value`	TimeValue \| null	—	The currently entered time (controlled)
`onChange`	(time: TimeValue \| null) => void	—	Handler called when the time value changes
`isDisabled`	boolean	`false`	Whether the time field is disabled
`isRequired`	boolean	`false`	Whether a time value is required
`isInvalid`	boolean	`false`	Whether the time field is in an invalid state
`errorMessage`	string	—	Error message displayed when invalid
`description`	string	—	Help text displayed below the input
`granularity`	'hour' \| 'minute' \| 'second'	`'minute'`	The smallest time unit to display (controls whether seconds are shown)
`hourCycle`	12 \| 24	—	Whether to use 12-hour or 24-hour time format
`size`	'sm' \| 'md' \| 'lg'	`'md'`	The visual size of the time field

Accessibility

Each time segment uses a spinbutton role with proper aria-valuemin, aria-valuemax, and aria-valuenow
Arrow Up/Down increments or decrements the focused segment
Tab moves focus between segments (hour, minute, AM/PM)
Typing digits automatically advances to the next segment
AM/PM segment can be toggled by typing "a" or "p"
Label is associated via aria-labelledby for screen reader announcement
Required state is communicated through aria-required