# Time Field

A segmented time input. Each part is a spin button you can type into or step.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/time-field
```

## Usage

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

export function Example() {
  return <TimeField defaultValue="09:30" min="09:00" max="17:00" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| value | 24 hour text, or null |  |
| defaultValue | 24 hour text, or null | null |
| onValueChange | (value) => void |  |
| min, max | 24 hour text |  |
| error | ReactNode |  |
| invalid | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |
| className | string |  |

## When to use

- When someone knows the exact time and wants to type it.

## When not to use

- For browsing times: use Wheel Picker or Slot Picker.

## Accessibility

- Each part is a spinbutton with a name and a text value.
- An out of range time sets invalid and announces why.

## Motion

- The focused part is an inverse chip, with a 120 ms fade.
- Digits roll as you step.
- With reduced motion, digits change at once.