DEVELOPER REFERENCE · v4.0.0

DurationField API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

DurationField23 props4 callbacks0 methods

Props23

DurationField props
Name	Type	Description
`value`Required	`string \| number \| ParsedDuration \| null`Inspect type	Value to display or edit. The declared type identifies the supported representation; change callbacks describe how edited values are emitted.
`label`Optional	`string \| undefined`	Label content or accessible name for the component, as rendered by this control.
`invalidText`Optional	`string \| undefined`	Validation message shown when the duration cannot be parsed or accepted.
`disabled`Optional	`boolean \| undefined`	Disables user interaction with the control.
`readOnly`Optional	`boolean \| undefined`	Displays the current value while preventing user edits.
`className`Optional	`string \| undefined`	Additional CSS classes applied to the component root.
`slider`Optional	`boolean \| DurationSliderOptions \| undefined`Inspect type	Slider configuration or visibility, according to the declared type.
`unitButtons`Optional	`boolean \| undefined`	Shows the controls for selecting a duration unit.
`unitLabels`Optional	`Partial<Record<DurationUnit, string>> \| undefined`Inspect type	Overrides localized labels for duration units.
`unitLabel`Optional	`string \| undefined`	Accessible label for the duration-unit control.
`placeholder`Optional	`string \| undefined`	Override the input hint, independently of the configured default unit.
`modeLabel`Optional	`string \| undefined`	Accessible label for the duration mode control.
`workingLabel`Optional	`string \| undefined`	Label for working-time duration mode.
`elapsedLabel`Optional	`string \| undefined`	Label for elapsed-time duration mode.
`defaultUnit`Required	`DurationUnit`Inspect type	Unit assumed when a duration value does not specify one.
`allowedUnits`Optional	`readonly DurationUnit[] \| undefined`Inspect type	Duration units offered by the editor.
`allowElapsed`Optional	`boolean \| undefined`	Allows elapsed-time duration values in addition to working-time values.
`required`Optional	`boolean \| undefined`	Requires a non-empty value or selection before the edit can be accepted.
`min`Optional	`number \| undefined`	Numeric bounds apply to the authored value, without implicit calendar conversions.
`max`Optional	`number \| undefined`	Maximum permitted value or upper bound for the control.
`maximumFractionDigits`Optional	`number \| undefined`	Maximum number of fractional digits used when formatting a duration.
`autoApply`Optional	`boolean \| undefined`	Apply completed edits automatically. Set false to require explicit Apply.
`showActions`Optional	`boolean \| undefined`	Show Apply/Cancel buttons. Defaults to true only when autoApply is false.

Events and callbacks4

DurationField events and callbacks
Name	Type	Description
`onChange`Required	`(value: ParsedDuration \| null) => void`Inspect type	Receives the new value when the user changes the control. Update the corresponding value prop for controlled use.
`onCommit`Optional	`((value: ParsedDuration \| null) => void) \| undefined`Inspect type	A completed slider or unit/mode interaction, distinct from text entry.
`onValidityChange`Optional	`((valid: boolean) => void) \| undefined`Inspect type	Receives true or false when the validity of the current input changes.
`onDraftChange`Optional	`((text: string) => void) \| undefined`Inspect type	Product forms can keep raw invalid drafts for their existing error/commit pipeline.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.