Balance Logo
Reckon Design System
Open playroom

Duration Input

An input to allow users to enter a duration.
pnpm add @balance-web/duration-input
Import usage
import {
} from '@balance-web/duration-input';
  • Code
  • API

The duration input lets users input an amount of time duration, not a specific time.


The value and onChange props expect an integer of minutes e.g. 1.5 hours would be 90 minutes. This is to circumvent JS issues with float calculations.

display prop allows user to select the duration format.

Duration input can handle vast number of duration input formats and converts them to desired format on blur,

User inputFormatted to (when "display: time")Formatted to (when "display: duration")
00:000h 0m
55:005h 0m
5.55:305h 30m
30m0:300h 30m
5h 30m5:305h 30m
5:305:305h 30m
5h30m5:305h 30m
30m 5h5:305h 30m


Basic with the default display prop (e.g. time)

Edit in Playroom

Basic with the display prop as duration

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo