Design pattern library: Character counter for input fields and text areas
Problem
It seems we don't have a character counter or anything that would tell users that the number of characters allowed in an input field is limited. We should come up with a solution and then make sure it gets applied to all such input fields and text areas.
Solution
Updated forms spec previews with added character counters
Design a pattern, then create an issue to implement it app-wide. Some applicable cases:
- Commit message inputs (as a warning to adhere to best practices).
- Profile bio.
- admin application settings email form
- group milestones form
- group description form
- project description form
- project tags form
- milestone title form
- issuable title form
The behaviour of the component:
-
the counter is always present when there's a limit on the text area. It's styled as
small secondary
text by default. -
When the number of characters entered is 30 away from the limit, the counter changes to
small warning
style -
when it crosses the limit (-1) it changes to
small danger
style and bold font weight -
the user is allowed to keep typing, the counter shows how many characters are over the limit (number turns to negative) and the characters that are over the limit are marked with the
$red-200
background.
The input field character counter needs a white background and the width of this box needs to be accounted for:
There is no such background behind the text area counter to keep the text inside readable.
We show a tooltip on hover over the counter (tap on counter on mobile):
Example(s)
Twitter has a very interesting and user friendly character counter. It's not prominent until it needs to be seen (number of remaining characters running short).
An exact number of remaining characters shows up when I come close to the limit:
And this is how it shows that there are more characters entered than what is allowed:
Usage
This pattern should be used whenever there's a limit to the number of characters allowed in an input field or a text area. We're talking about restricting with a hard limit, not a recommendation. The counter is always present in the right corner (bottom right for text area) to make it instantly recognizable.
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
|
|
---|---|
Always show the character counter when there's a limit on an input field/ text area. | Don't use this pattern for recommended text length, only for strict limits. |
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)Not really a new pattern, more an update to existing patterns.