Balance Logo
Balance
Reckon Design System
Open playroom

Duration Input

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

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

Usage

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.

The value presented to the user will be formatted on blur e.g. "1.5" --> "1:30".

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