Background goal

Add an interactive demo (with code sample) to the Field component page to demonstrate how to embed an interactive character counter in the component's help-text slot.

This can be used as a reference for teams who need to implement similar custom features in their own applications.

Design proposal

• The characters counter appears next to the Helper text (if the helper text is visible)
• The characters counter counts down while typing
• The characters counter becomes error when the user types more than the available characters, and an error inline message appears below the helper and counter. The error in the characters counter is maintained until the user removes the extra characters.
• When there is no helper text, the inline error message appears next to the error characters counter.

Acceptance criteria

Design

• Include this an example in the Figma spec

Code

• Include characters counter as example in the demo (not as component's property at the moment)