Components / Duration and effort

Duration and effort

Explore every variant and expand each example’s formatted usage code.

Duration and effort

Edit duration and effort with units, elapsed time and optional sliders.

Duration and effort

{"value":2,"unit":"day","elapsed":false}

<DurationField
  slider={{ max: 100, step: 0.25 }}
  unitButtons
  defaultUnit="day"
  value={duration}
  onChange={setDuration}
  allowElapsed
/>
<output>{JSON.stringify(duration)}</output>

API reference

Explore the complete contracts and inspect complex types.