Min/Max Character Counter Indicator for Text Inputs

So I have an input box with a min/max character count, I would love some sort of visual indicator of that setting in the UI.

Something like:

previewTextBox

Coded example: https://codepen.io/sean-vosler/pen/jENgEQp

More details:
Currently, Noloco allows setting minimum and maximum character lengths for text inputs, but there is no real-time feedback to indicate progress towards these limits. This can lead to confusion for users who may not realize they have not met the minimum requirement or have exceeded the maximum limit until they try to submit the form.

Request:
Introduce a live character counter that dynamically updates as users type within text inputs. This should:

  • Display the current character count next to or below the input field.
  • Indicate when the minimum required characters have been reached (e.g., changing color from red to green).
  • Provide a visual alert when the maximum character limit is exceeded (e.g., turning orange and preventing further input).

Suggested Implementation:

  • Live Character Counter: Display X / Y characters below the input field (e.g., 125 / 2000 characters).
  • Dynamic Color Changes:
    • Red when below the minimum threshold.
    • Green when within the valid range.
    • Orange/Bold when exceeding the max limit.
  • Auto-Truncate Input (Optional): If a user pastes text exceeding the max limit, automatically trim it and notify them.
  • Caret Positioning Fix (Optional): Ensure the cursor remains at the end when truncation occurs.

This enhancement would greatly improve user experience, providing immediate feedback instead of users encountering an error only after attempting to submit the form. :rocket:

Yes im too lazy to write up my own feature request, thx chatgpt.

2 Likes

This would be great!!

Lol great use of ChatGPT :slight_smile: #worksmarternotharder

Great suggestion @seanvosler - and brilliant demo, thank you!

2 Likes