Implement index to visualize the current and max length in Input and TextArea Components

[myllenaalves]

Problem

We need this index so the user can visualize the number of characters (current and the maxLimit) while typing the content.

Solution

Link to figma: https://www.figma.com/design/uVFkApBTiuckbOoMiTQY8j/%F0%9F%93%90-Form-handoff---1.0?node-id=40-30666&node-type=section&m=dev

Usage examples

Dependencies

No response

References

https://www.figma.com/design/uVFkApBTiuckbOoMiTQY8j/%F0%9F%93%90-Form-handoff---1.0?node-id=40-30666&node-type=section&m=dev

[felipepowlist]

@davicostalf @beatrizmilhomem In terms of our current design for character length, I am only suggesting that we use color to indicate when the limit is reached (Figma). I'd like your opinion on this. This is not a must have feature, but if it makes sense we could already incorporate this in the implementation

[beatrizmilhomem]

@felipepowlist There's no problem with incorporating the color in your context! You can also create a separate issue with this proposal, so that we can start mapping other possible scenarios and understand if it would make sense to rethink the counter in Shoreline.

[beatrizmilhomem]

@myllenaalves It's possible to implement the counter using the Field props. @lucasaarcoverde @matheusps can you give more details here, please?

[myllenaalves]

Hi, @beatrizmilhomem! I didn't explore the Field component, which solves the problem I bring up here. We may have some small design adjustments, but that probably solves for a while. Thank you ✨

[myllenaalves]

About the small design adjustments:

I discussed it with @felipepowlist, and in the content platform Figma proposal, we have an example where the character count can exceed the limit, and the value also displays the red error color.

Shoreline:

Figma:

[beatrizmilhomem]

@myllenaalves @felipepowlist is the character limit a rule or just a recommendation for the user? The critical color "Conveys that an action failed due to a system or user error." (color best practices), so it is appropriate to use it if the limit is a rule and the user can't submit the form if the limit is exceeded. The warning color is more appropriate if it is a recommendation for the user, like in the first proposal.