# Typable time input

> Type 930, 14:30 or 2:30 pm, or step through free times with the arrow keys.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-time-picker-3).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-time-picker-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-time-picker-3-light-39643d63c6a6670f.png
- Registry item: https://reui.io/r/new-york-v4/c-time-picker-3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-time-picker-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `field`, `@reui/time-picker`

## Files

### `c-time-picker-3.tsx`

```tsx
"use client"

import { useId, useState } from "react"
import {
  TimePicker,
  TimePickerContent,
  TimePickerInput,
} from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  const id = useId()
  const [value, setValue] = useState<string | null>(null)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Field>
        {/* `htmlFor` alone is enough: the input speaks its own value. */}
        <FieldLabel htmlFor={id}>Pickup time</FieldLabel>
        <TimePicker
          id={id}
          minuteStep={5}
          value={value}
          onValueChange={setValue}
          aria-describedby={`${id}-description`}
        >
          {/* Typed text commits on blur or Enter; unreadable text reverts.
              The popover anchors on the clock button at the end of the
              field, so `align="end"` keeps it under the field. */}
          <TimePickerInput />
          <TimePickerContent align="end" />
        </TimePicker>
        <FieldDescription id={`${id}-description`}>
          Type 930, 14:30 or 2:30 pm. Times snap to 5 minutes.
        </FieldDescription>
      </Field>
      <p role="status" className="text-muted-foreground text-sm">
        {value ? `Pickup at ${value}` : "No pickup time yet"}
      </p>
    </div>
  )
}
```