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

Ask for Help
1

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.

2

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.

2 Likes
3

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

4

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;
}
[data-test="app-text-field"]::after{
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
2 Likes
5

Oooh great … where do I put that code ?

6

In a rich text component

1 Like