# Duration Picker

> A React duration picker for hours and minutes whose pill springs apart into editable fields.

- Type: React component (Inputs)
- Access: Free (the source is open to everyone)
- Version: 1.0.1
- Install: `npx wingo-ui@latest add duration-picker`
- Docs: https://wingo-ui.com/components/duration-picker

## Interaction

Click the pen to spring the segments apart and start editing; the hours field is focused for you and the pen morphs into a tick. Type your values. Anything past the ceiling (24 hr and 60 min by default) clamps to the max and shakes so you know it was corrected. Click the tick to confirm and watch the pill merge back into one piece.

## Installation

```bash
npx wingo-ui@latest add duration-picker
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/duration-picker.json`

Files:

- `components/ui/duration-picker.tsx`

npm dependencies: `npm i motion figma-squircle flubber react-use-measure @radix-ui/react-slot && npm i -D @types/flubber`

Wingo UI dependencies (installed automatically):

- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
"use client"

import { useState } from "react"
import DurationPicker, { type DurationValue } from "@/components/ui/duration-picker"

export function Demo() {
  const [duration, setDuration] = useState<DurationValue>({ hours: 1, minutes: 30 })

  return (
    <DurationPicker
      size="md"
      value={duration}
      onChange={setDuration}
      onConfirm={(d) => console.log("saved", d)}
    />
  )
}

// zero config, fully uncontrolled
// <DurationPicker onConfirm={(d) => console.log("saved", d)} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size?` | `"sm" \| "md" \| "lg"` | `"md"` | Overall scale. The pill is 40px (sm, 44px on touch screens), 48px (md) or 56px (lg) tall, and the corner radius, the open field width, the icon and the text size scale with it. |
| `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | Outer corner radius of the squircle: square, tighter, the original 10 / 12 / 14px per size, rounder, or a pill. The inner corners open up from it while editing. |
| `surfaceColor?` | `string` | `"auto"` | Fill of the three segments, any CSS color. Auto is a soft gray that follows the light and dark theme. A translucent tint keeps the digits readable in both themes. |
| `labelColor?` | `string` | `"auto"` | Color of the Hr. and Min. labels, any CSS color. Auto is a muted gray tuned per theme. |
| `valueColor?` | `string` | `"auto"` | Color of the typed digits, any CSS color. Auto is black on light pages and white on dark ones. |
| `accentColor?` | `string` | `"#868593"` | Color of the pen icon and the tick it morphs into, any CSS color. |
| `gap?` | `number` | `8` | Space in pixels the three segments spread apart to while editing. |
| `maxHours?` | `number` | `24` | Ceiling for the hours field. Typing past it clamps to this value and shakes the input. |
| `maxMinutes?` | `number` | `60` | Ceiling for the minutes field. Same clamp and shake behavior as maxHours. |
| `defaultEditing?` | `boolean` | `false` | Renders the picker already open in edit mode, with the tick showing. |
| `hoursLabel?` | `string` | `"Hr."` | Text rendered after the hours field. Swap it for a translation or a terser h. |
| `minutesLabel?` | `string` | `"Min."` | Text rendered after the minutes field. |
| `editLabel?` | `string` | `"Edit duration"` | Accessible name of the pen button while the picker is closed. |
| `saveLabel?` | `string` | `"Save duration"` | Accessible name of the tick button while editing. |
| `disabled?` | `boolean` | `false` | Dims the control to half opacity and blocks entering edit mode. |
| `value?` | `{ hours: number; minutes: number }` |  | Controlled value. Pair it with onChange and the picker mirrors whatever you pass in. Leave it out to let the component manage its own state. |
| `defaultValue?` | `{ hours: number; minutes: number }` |  | Starting value for uncontrolled usage. Ignored when value is provided. Left out, both fields start empty and show a 0 placeholder. |
| `onChange?` | `(value: DurationValue) => void` |  | Fires on every keystroke with the current clamped value. Listen here to react while the user types. |
| `onConfirm?` | `(value: DurationValue) => void` |  | Fires once with the final clamped value when the tick is clicked. This is usually the one you want for saving. |
| `onEditingChange?` | `(editing: boolean) => void` |  | Fires when the picker enters or leaves edit mode, handy for blocking navigation or dimming surrounding UI while it is open. |
| `className?` | `string` |  | Extra classes merged onto the root; other div props are spread onto it too. Every inner part carries a data-slot (duration-picker, duration-picker-segment, duration-picker-input, duration-picker-toggle) plus data-editing, data-disabled and data-size states, and the colors live in the --duration-picker-surface, --duration-picker-label and --duration-picker-value variables, so you can restyle from CSS alone. |

## Parts

### DurationValue (type)

The value shape for value, defaultValue, onChange and onConfirm: { hours: number; minutes: number }.

## Examples

- **Logging time on a task**: onConfirm fires once with the final value when the tick is pressed, which is the moment to save the entry.
- **Custom limits and labels**: maxHours and maxMinutes set the ceilings, so anything above them clamps and shakes; short labels keep the pill compact.
- **Sizes**: sm, md and lg are 40, 48 and 56px tall, with the corners, field and icon scaled to match.
- **Tinted**: A translucent surface with a matching label and icon color reads well in both themes.

## See also

- [Time Picker](https://wingo-ui.com/components/time-picker) ([Markdown](https://wingo-ui.com/components/time-picker.md))
- [Number Input](https://wingo-ui.com/components/number-input) ([Markdown](https://wingo-ui.com/components/number-input.md))
- [Date Time Picker](https://wingo-ui.com/components/date-time-picker) ([Markdown](https://wingo-ui.com/components/date-time-picker.md))
- [Countdown](https://wingo-ui.com/components/countdown) ([Markdown](https://wingo-ui.com/components/countdown.md))
- [Picker Wheel](https://wingo-ui.com/components/picker-wheel) ([Markdown](https://wingo-ui.com/components/picker-wheel.md))

---

Canonical: https://wingo-ui.com/components/duration-picker
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt