# Form Time Range Picker

Time range picker with start and end time, step and duration.

- id: `form-time-range-picker`
- Page: https://agentic-ui-kit.com/components/form-time-range-picker
- Live preview: https://agentic-ui-kit.com/live/component/form-time-range-picker?piece=form-time-range-picker

## Install

```bash
agentic-ui add form-time-range-picker
npx shadcn@4.17.0 add @agentic-ui/form-time-range-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** start-end-time, step-minutes, overnight-ranges, duration-readout, day-bar, min-max-duration, validation-messages, snap-on-blur, form-field, dark-mode
- **Intents:** create-edit, configure
- **Suits domains:** hr, healthcare, operations, saas, settings
- **Interaction:** text-entry, keyboard-navigation, validation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** time range picker with start and end time, step and duration, shift hours input that supports overnight shifts past midnight, business hours field with validation of minimum and maximum duration, start and end time fields that show the total duration
- **Avoid when:** a date plus time range (use form-date-range-picker with a time field), choosing a free slot from availability (use scheduling-slot-picker), a single time of day (use the time input in form-masked-inputs)
- **Preserve when adapting:** overnight-rule, validation-messages, live-readout
- **Replace when adapting:** step, limits, labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives