Duration Picker

A gooey, spring-animated picker for entering a duration in hours and minutes. Click the pen to spring the segments apart and start editing; click the tick to confirm and watch the pill merge back into one piece.

Last updated October 20, 2018

CreditsModifiedPublished

Copied from Rare UI.

Removed @radix-ui/react-slot and restored asChild via @base-ui/react/use-render (Base UI's Slot equivalent), so the toggle segment supports composition with no Radix dependency
Snappier springs per animation-review (gap 380/30/mass 0.9, width and icon 400/32, sway 320/26, error shake 700/14) to remove the upstream lag while keeping the gooey overshoot
active:scale-90 softened to active:scale-[0.96] with a 100ms ease-out press transition and a focus-visible ring on the toggle
Added a dir prop (auto-detected from the nearest [dir] ancestor); under RTL the gooey gap opens on the inline-end side, the squircle outer corners flip, and pl-2 became logical ps-2

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/duration-picker

Usage

"use client"
 
import DurationPicker, {
  type DurationValue,
} from "@/components/ui/duration-picker"
import { useState } from "react"
 
export function Demo() {
  const [duration, setDuration] = useState<DurationValue>({
    hours: 1,
    minutes: 30,
  })
 
  return (
    <DurationPicker
      value={duration}
      onChange={setDuration} // fires while typing
      onConfirm={(d) => console.log("saved", d)} // fires when the tick is clicked
    />
  )
}
 
// Zero-config: it also works fully uncontrolled
// <DurationPicker onConfirm={(d) => console.log("saved", d)} />

RTL

Under RTL the gooey gap opens on the inline-end side, the squircle's outer corners flip to the outer edge, and the labels can be swapped for Persian (hoursLabel="ساعت" minutesLabel="دقیقه").

API Reference

DurationPicker

Prop	Type	Default	Description
value	DurationValue	undefined	Controlled value. Pair with onChange and the picker will mirror whatever you pass in. Leave it out to let the component manage its own state.
defaultValue	DurationValue	undefined	Starting value for uncontrolled usage. Ignored when value is provided.
onChange	(value: DurationValue) => void	—	Fires on every keystroke with the current clamped value — listen here if you want to react while the user types.
onConfirm	(value: DurationValue) => void	—	Fires once with the final value when the tick is clicked. This is usually the one you want for saving.
onEditingChange	(editing: boolean) => void	—	Notifies you when the picker enters or leaves edit mode — handy for blocking navigation or dimming surrounding UI while open.
defaultEditing	boolean	false	Render the picker already open in edit mode.
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.
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.
disabled	boolean	false	Dims the control and blocks entering edit mode. Standard form-field behavior.
dir	"ltr" \| "rtl"	auto (from the nearest [dir] ancestor)	Force the text direction. Under RTL the gooey gap opens on the inline-end side and the squircle's outer corners stay on the outer edge.
className	string	undefined	Extra classes merged onto the root. Every inner part also carries a data-slot attribute (duration-picker, -segment, -input, -toggle) plus data-editing / data-disabled states, so you can restyle from CSS alone.

Edit this page on GitHub

PreviousDropdown Menu NextElastic Range Slider