[pickers] Expose Required Prop

[sayedMurtadha]

Summary

In the pickers, if you want to mark the input field as required to get the HTML5 validation and the visual indication (*) of a required input field, you can use the slotProps.

What I would expect as a user of other MUI components is the required prop exposed to the pickers API directly instead of going down in the slotProps especially since it is directly related to the input and not a custom prop that would need to be hidden.

Examples

The below example shows how to do it for the DatePicker:

<DatePicker
  label="Example picker" 
  slotProps={{
    textField: {
      required: true,
    }
  }}
/>

The desired usage looks like below:

<DatePicker
  label="Example picker" 
  required
/>

Motivation

Consistency with other MUI material inputs and limiting any future backward incompatibility issues caused by a change in the underlying slots being used.

Search keywords: required, picker

[LukasTy]

Hello @sayedMurtadha, thank you for creating this issue. 👍
It looks like we already have an issue targetting this problem: #7633.
I'm closing this one as duplicate. 😉