Carbon: [Text input] Add character limit/counter

[tomlroach]

Summary

Text fields and text areas may have a maximum number of characters. This character limit might need to be communciated:

1. to users ahead of time, so they can format their input,
2. Whilst a user is entering their input so they know how many characters remain
3. In the form of a validation error when the user reaches the limit

Design usage guidelines and/or enhancements to the components to support that design would be desirable.

Justification

It's a common pattern which you can see on a number of IBM products and tools and would be good to standardise.

Desired UX and success metrics

When a user is typing into a form field which has a maximum value, that value is communicated to the user, and if the limit is reached, they are informed whilst typing.

"Must have" functionality

Tell the user ahead of time what the value is
Tell the user clearly when they have hit the limit (and stop them entering text)

Might also include a "x characters remaining" indicator so users know how many more they can enter.

[emyarod]

cc @IBM/carbon-designers for a spec or mockup on text input and textarea character limit UX

[jeanservaas]

@tomlroach this is great added functionality and we'll need to explore and possibly text a pattern before settling on a final spec for this:

• settling on a max
• how to deal with characters remaining
• whether to actually limit the characters or colorize the overflow as a warning

After the v10 release, we will start prioritizing opportunities to expand on existing functionality and get stuff like this into the pipeline.

good discussion of this here and I really like the text colorization example at the bottom:
https://ux.stackexchange.com/questions/13055/character-limits-on-fields-pros-and-cons-and-best-practices

[aagonzales]

Adding general text area for devs. I'd be open to doing the character count in a different way. I know some times people prefer it counting down instead up. I know Andy Nelson had some ideas/opinions on it

[aagonzales]

Could put it all in the helper text area?

[connor-leech]

https://github.com/carbon-design-system/carbon-website/issues/1477 I made an issue about the same thing, added to website repo for site guidance

[emyarod]

has the spec for this been finalized?

[asudoh]

I have an impression that we need a bit more discussion on this, but @IBM/carbon-designers please don't hesitate to correct me if some of the links/images referred from this series of issues are something dev should start implementing. Thanks!

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[asudoh]

High priority item among post-v10 UX enhancements.

[ethangeyer]

👀

[emyarod]

reopening due to #3106

[fxfeiyi]

Could put it all in the helper text area?

Could anyone give me a demo about how to use this Character counter?
The carbon version I use is as follows:
"carbon-components": "^9.73.5",
"carbon-components-react": "^6.91.4",
"carbon-icons": "^7.0.7",

[jimmydyer]

Have there been any updates to added the Character count feature? I'm interested in adding this to our product but wanted to know if there design guidance on either using helper text to count down or using the 0/100 count-up method...