## Time Field (S—187)

A segmented time input: hour, minute and AM/PM segments you type into or step with arrows; focus jumps forward.

- URL: https://sundaeui.dev/components/time-field
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/time-field.json`
- Tags: form, clock, picker, time, segmented, input

Each segment is its own spinbutton. Typing “9” in hours waits for a second digit, “2” jumps straight to minutes; arrows step and wrap, and minutes can snap to 5 or 15.
A/P sets the meridiem. The whole field reads as one value to assistive tech and forms.

### Usage

```tsx
import { TimeField } from '@/components/sundae/time-field'

<TimeField />
```

### Props

- `value / defaultValue` (`string`): 24-hour “HH:MM”.
- `onValueChange` (`(v: string) => void`): Called on change.
- `step` (`number`, default `5`): Minute step for arrows.
- `hour12` (`boolean`, default `true`): 12-hour display.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Booking, reminders, schedules, alarms.

### When not to use

- Picking from a few fixed slots: show the slots.

### Accessibility

- A group labelled by the field label, with three spinbuttons that have aria-valuetext.
- Backspace clears a segment; Left/Right move between segments.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Step
- ← / →: Previous / next segment
- A / P: AM / PM