How to customize error component?

General
1

I’m trying to customize the component in which the error message appears. Like moving it to one side, add icons and change width.

This is what I try to achieve:

image
image749×187 6.43 KB

It seems like the error message is strictly shown below the input text. However, I’d like it to be shown within the entire row without changing the text filed width or anything.

Is it possible to achieve this?

2

This is what I have achieved so far btw
image

3

Hi @Casco,

Using a custom renderer you have full control over the UI and can render it in any way you like.

4

I am already using a custom rendered but don’t know how to customize the error message using that. Could you please send me some documentation to do so?

5

Instead of using a TextField of Material UI you can build your own out of the primitives Material UI offers. For the error you can use for example FormHelperText and render it the way you like.