time-range-field.md

productId	title	components	githubLabel	packageName
x-date-pickers	React Time Range Field components	MultiInputTimeRangeField, SingleInputTimeRangeField	component: pickers	@mui/x-date-pickers-pro

Time Range Field

The Time Range Field let the user select a range of time with the keyboard.

Basic usage

:::info All the topics covered below are applicable to both SingleInputTimeRangeField and MultiInputTimeRangeField unless explicitly mentioned. :::

You can render your Time Range Field with either one input using SingleInputTimeRangeField or two inputs using MultiInputTimeRangeField as show below.

{{"demo": "BasicTimeRangeField.js"}}

The value of the component can be uncontrolled or controlled.

{{"demo": "TimeRangeFieldValue.js"}}

:::info

• The value is controlled when its parent manages it by providing a value prop.
• The value is uncontrolled when it is managed by the component's own internal state. This state can be initialized using the defaultValue prop.

Learn more about the Controlled and uncontrolled pattern in the React documentation. :::