Custom error message under an entry field (example: number field)

Do we have control over the sentence in red that appears when there is an error filling in a field? As for example when setting a minimum number, there is a small sentence in red which appears below the field. Example, in the case of a minimum value, this gives: the value must be greater than or equal to 5.

We don’t have control over that statement specifically, but you can always create a hint text component to appear when that same condition is met and then use whatever verbiage you’d like.


Thank you I will try it. Pity :confused: but that design is beautiful. I need something short, small, red. This is what does Instagram.

Yes! You got two options

  1. You can choose to have min and Max and the default Red hint kicks in!
  2. Use CSS

[data-test="app-text-field"] +caption {
display: none;
content: "Invalid phone number";
color: rgb(255,118,116);
margin-top: 8px;
text-align: start;
font-weight: 400;
font-size: 0.75rem;
line-height: 1.0625rem;
font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

Credits: @ThinhDinh

Oooh great … where do I put that code ?

In a rich text component

1 Like