Loading…

Duration Picker

beta

A duration pill that springs apart into hours, minutes and a tick with a gooey melt, clamps and shakes past its ceiling, and merges back on confirm.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add duration-picker

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { DurationPicker } from "@/components/ui/duration-picker";

Examples

Every example the tests run, live and operable, side by side.

Default
Editing
Custom Ceiling
Sizes
Controlled
Localised
Disabled

API

Generated from the component's own types, so a prop cannot appear here without existing.

<DurationPicker>

Prop	Type	Default
`defaultEditing` Starts in edit mode when uncontrolled.	`boolean`	`false`
`defaultValue` Initial value when uncontrolled. Default 0 hr 0 min.	`DurationValue`	`{ hours: 0, minutes: 0 }`
`disabled` Dims the pill and keeps it shut.	`boolean`	`false`
`editing` Controlled edit mode.	`boolean`	—
`hoursLabel` Unit shown after the hours. Default "hr".	`string`	`"hr"`
`labels` Accessible names and announcements, for translation.	`Partial<DurationPickerLabels>`	—
`maxHours` Ceiling for hours; typing past it clamps and shakes. Default 24.	`number`	`24`
`maxMinutes` Ceiling for minutes. Default 59.	`number`	`59`
`minutesLabel` Unit shown after the minutes. Default "min".	`string`	`"min"`
`onConfirm` Called once with the final value when the tick is pressed or Enter is.	`(value: DurationValue) => void`	—
`onEditingChange`	`(editing: boolean) => void`	—
`onValueChange` Called on every keystroke with the clamped value, and when Escape reverts it.	`(value: DurationValue) => void`	—
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`value` Controlled value.	`DurationValue`	—

Plus every attribute of <div> except defaultValue, onChange, children.

Accessibility

A role="group" named "Duration" unless given aria-label or aria-labelledby. Shut, it is text ("2 hr 30 min") and one button, "Edit duration". Pressing it opens two text fields with inputMode="numeric", named "Hours" and "Minutes", moves focus to the hours, and the button becomes "Confirm duration". Enter in a field or the tick confirms; Escape anywhere inside restores the value from before editing; both hand focus back to the button. A clamped entry is announced politely ("Maximum 24") as well as shaken, so the correction is not visual only. Names and the announcement are translatable through `labels`. The blobs, goo filter and icons are aria-hidden; under reduced motion the goo is dropped and the pill parts and merges instantly.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

defaultEditing

Starts in edit mode when uncontrolled.

boolean

false

defaultValue

Initial value when uncontrolled. Default 0 hr 0 min.

DurationValue

{ hours: 0, minutes: 0 }

disabled

Dims the pill and keeps it shut.

boolean

false

editing

Controlled edit mode.

boolean

—

hoursLabel

Unit shown after the hours. Default "hr".

string

"hr"

labels

Accessible names and announcements, for translation.

Partial<DurationPickerLabels>

—

maxHours

Ceiling for hours; typing past it clamps and shakes. Default 24.

number

24

maxMinutes

Ceiling for minutes. Default 59.

number

59

minutesLabel

Unit shown after the minutes. Default "min".

string

"min"

onConfirm

Called once with the final value when the tick is pressed or Enter is.

(value: DurationValue) => void

—

onEditingChange

(editing: boolean) => void

—

onValueChange

Called on every keystroke with the clamped value, and when Escape reverts it.

(value: DurationValue) => void

—

size

"sm" | "md" | "lg"

"md"

value

Controlled value.

DurationValue

—