[docs] Clarify what Controlled / Uncontrolled means

docs/data/date-pickers/date-calendar/date-calendar.md

@@ -14,12 +14,18 @@ packageName: '@mui/x-date-pickers'
 
 {{"demo": "BasicDateCalendar.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateCalendarValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Form props
 
 The component can be disabled or read-only.

docs/data/date-pickers/date-field/date-field.md

@@ -14,12 +14,18 @@ packageName: '@mui/x-date-pickers'
 
 {{"demo": "BasicDateField.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateFieldValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Customize the date format
 
 {{"demo": "CustomDateFormat.js"}}

docs/data/date-pickers/date-picker/date-picker.md

@@ -25,12 +25,20 @@ Check-out their documentation page for more information:
 - [Date Field](/x/react-date-pickers/date-field/)
 - [Date Calendar](/x/react-date-pickers/date-calendar/)
 
-## Uncontrolled vs. Controlled
+## Uncontrolled vs. controlled value
 
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DatePickerValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Available components
 
 The component is available in four variants:

docs/data/date-pickers/date-range-calendar/date-range-calendar.md

@@ -14,12 +14,18 @@ packageName: '@mui/x-date-pickers-pro'
 
 {{"demo": "BasicDateRangeCalendar.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateRangeCalendarValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Form props
 
 The component can be disabled or read-only.

docs/data/date-pickers/date-range-field/date-range-field.md

@@ -21,8 +21,14 @@ All the topics covered below are applicable to both `SingleInputDateRangeField`
 
 {{"demo": "BasicDateRangeField.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateRangeFieldValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::

docs/data/date-pickers/date-range-picker/date-range-picker.md

@@ -25,12 +25,18 @@ Check-out their documentation page for more information:
 - [Date Range Field](/x/react-date-pickers/date-range-field/)
 - [Date Range Calendar](/x/react-date-pickers/date-range-calendar/)
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateRangePickerValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Available components
 
 The component is available in four variants:

docs/data/date-pickers/date-time-field/date-time-field.md

@@ -14,12 +14,18 @@ packageName: '@mui/x-date-pickers'
 
 {{"demo": "BasicDateTimeField.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateTimeFieldValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Customize the date time format
 
 {{"demo": "CustomDateTimeFormat.js"}}

docs/data/date-pickers/date-time-picker/date-time-picker.md

@@ -32,12 +32,18 @@ Check-out their documentation page for more information:
 - [Date Calendar](/x/react-date-pickers/date-calendar/)
 - [Time Clock](/x/react-date-pickers/time-clock/)
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateTimePickerValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Available components
 
 The component is available in four variants:

docs/data/date-pickers/date-time-range-field/date-time-range-field.md

@@ -21,8 +21,14 @@ or two inputs using `MultiInputDateTimeRangeField` as show below.
 
 {{"demo": "BasicDateTimeRangeField.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DateTimeRangeFieldValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::

docs/data/date-pickers/digital-clock/digital-clock.md

@@ -20,12 +20,18 @@ The `DigitalClock` is more appropriate when there is a limited amount of time op
 
 {{"demo": "DigitalClockBasic.js"}}
 
-## Uncontrolled vs. Controlled
-
-The components can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "DigitalClockValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Form props
 
 The components can be disabled or read-only.

docs/data/date-pickers/time-clock/time-clock.md

@@ -14,12 +14,18 @@ packageName: '@mui/x-date-pickers'
 
 {{"demo": "BasicTimeClock.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "TimeClockValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Form props
 
 The component can be disabled or read-only.

docs/data/date-pickers/time-field/time-field.md

@@ -14,12 +14,18 @@ packageName: '@mui/x-date-pickers'
 
 {{"demo": "BasicTimeField.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "TimeFieldValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Customize the time format
 
 {{"demo": "CustomTimeFormat.js"}}

docs/data/date-pickers/time-picker/time-picker.md

@@ -26,12 +26,18 @@ Check-out their documentation page for more information:
 - [Digital Clock](/x/react-date-pickers/digital-clock/)
 - [Time Clock](/x/react-date-pickers/time-clock/)
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+The value of the component can be uncontrolled or controlled.
 
 {{"demo": "TimePickerValue.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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::
+
 ## Available components
 
 The component is available in four variants:

docs/data/date-pickers/time-range-field/time-range-field.md

@@ -21,8 +21,14 @@ or two inputs using `MultiInputTimeRangeField` as show below.
 
 {{"demo": "BasicTimeRangeField.js"}}
 
-## Uncontrolled vs. Controlled
-
-The component can be uncontrolled or controlled.
+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](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+:::