[Text Field] Validity pseudo classes should apply styling

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

MUI should style form inputs on the :invalid and :valid pseudo classes, similar to how bootstrap works for form validation: https://getbootstrap.com/docs/4.6/components/forms/#validation.

This way, I can use the native html form validation and things just work.

Examples 🌈

E.g., if I have any rendered input under the hood with props like <input type="text" pattern="[0-9]*" required/>, any time the value changes to an empty value or a non number, it will be marked as :invalid. This should auto-style the input into the error state as described here. Bonus points if you could also set custom validity messages on props that in turn calls setCustomValidity(message).

Motivation 🔦

Without this feature, I'm stuck doing manual form validation. That is, I am required to have some function onValidate that will check the form input validity and toggle the error property. If MUI worked this way, I could just use all native html input validation properties and things would just work.

Start by inspecting how MUI Text Field renders its underlying input and how the error state is currently applied. Use the native HTML validation example with required and pattern attributes to check the :invalid and :valid states. Done means rendered inputs receive the expected validation styling without manual error toggling; custom validity messages are an optional extension mentioned in the issue.