How it helps marketers
Contextual character limits allows marketers to craft compelling and concise content within given constraints. It's crucial for fields where the count of characters impacts performance and message visibility.
Character limit guidelines offer essential context for making effective messaging and naming decision. Knowing the available characters for a specific field enables marketers to tailor their content strategically. Whether it's crafting a compelling SMS message, an easy to find campaign name, or a contextual description, marketers rely on character count to create meaningful content within given constraints.
Using this pattern
Character count value
The max characters for a field is generally determined either by:
- the amount we’re able to store in the backend
- an explicit requirement defined by the input context (SMS message or email subject line)
While there isn’t a default value for character limits on fields, it is important to have a conversation with your engineers around length—particularly with fields where we expect the character length might approach the backend limit for those values.
Visibility
Depending on the context, character limit should be visible all of the time or only when the input is within 10 characters of the max length.
Temporary (preferred)
Show character counts when the marketer is 10 characters from the character limit. Once the limit is hit, the marketer cannot add additional characters. If the character count has temporary visibility, the character count should not be visible when the field is out of focus. Additionally, the limit should be hidden once the string is updated to 10 characters below the max.
Input text
As a marketer names a new campaign, we omit the character count max (255 characters in this example) by default. The count will only appear in the top-right corner if the inputed text reaches 10 characters of the limit. The marketer will not be able to add additional characters once the limit is reached.
After 500ms or once the marketer adjusts the input such that character count is 10 less than the limit (which would equal character count-10) the counter in the top-right slides down out of view.
Inline editing
If the field has a max length set, and the marketer approaches 10 input characters or less from the max length, a tool tip should appear below and justified to the right of the input indicating the limit is approaching. Once the limit has been reached, they can no longer enter in any additional characters.
Animation properties
The character limit should
${slideUpFade} = keyframes`from
{ opacity: 0; transform: translateY(2px);}
to
{ opacity: 1; transform: translateY(0);}`;
${easing.entrance}: 'cubic-bezier(0, 0, 0.34, 0.95)',
${duration.short}: '120ms',
Animation properties for the character count slide-in
Always visible
Always show character count for fields that have a defined limit based on their context. For example the amount of characters in a SMS Message or email subject line. Another example for this use case could be instances where the character limit is relatively low and something we’d want the user to be aware of upfront.
By default, character counts are hidden to reduce cognitive load, appearing only when within 10 characters of the limit. Exceptions include contexts where character limits are crucial, like SMS or email subject lines.
Error states
There is no error state for when a user hits the max Character limits, but no additional characters will be included when the max is reached.
