# Min/Max Character Counter Indicator for Text Inputs

**URL:** https://community.noloco.io/t/min-max-character-counter-indicator-for-text-inputs/1686
**Category:** Feature Requests
**Tags:** feature-request
**Created:** [February 6, 2025, 9:38pm UTC](https://community.noloco.io/t/min-max-character-counter-indicator-for-text-inputs/1686 "2025-02-06T21:38:54Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![seanvosler](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/seanvosler/32/698_2.png) [@seanvosler](https://community.noloco.io/u/seanvosler)
#### Post date: [February 6, 2025, 9:38pm UTC](https://community.noloco.io/t/min-max-character-counter-indicator-for-text-inputs/1686/1 "2025-02-06T21:38:55Z")

</div>

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.

 ![input example](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/1/156ff972993b94df638ec8cd15f5a488f1eab8d9.png)

# Something like:

![previewTextBox](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/4/46310972972ad28626b450ca1d2227b37e92a749.webp)

# Coded example: [https://codepen.io/sean-vosler/pen/jENgEQp](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. 🚀

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

---

<div class="post-metadata">

### Author: ![Brandi\_Bullock](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/brandi_bullock/32/73_2.png) [@Brandi\_Bullock](https://community.noloco.io/u/Brandi_Bullock)
#### Post date: [February 7, 2025, 1:35am UTC](https://community.noloco.io/t/min-max-character-counter-indicator-for-text-inputs/1686/2 "2025-02-07T01:35:29Z")

</div>

This would be great!!

Lol great use of ChatGPT 🙂 #worksmarternotharder

---

<div class="post-metadata">

### Author: ![darragh](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/darragh/32/12_2.png) [@darragh](https://community.noloco.io/u/darragh)
#### Post date: [February 7, 2025, 10:42am UTC](https://community.noloco.io/t/min-max-character-counter-indicator-for-text-inputs/1686/3 "2025-02-07T10:42:41Z")

</div>

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

---

<div class="post-metadata">

### Author: ![thecasemaster](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/thecasemaster/32/1196_2.png) [@thecasemaster](https://community.noloco.io/u/thecasemaster)
#### Post date: [March 20, 2025, 9:16pm UTC](https://community.noloco.io/t/min-max-character-counter-indicator-for-text-inputs/1686/4 "2025-03-20T21:16:01Z")

</div>

A way that I think would be cool to see something like this work would be to have a section in the dynamic data that allows for calculations, similar to how fillout does, and allow me to program in and format the calculations how I want them.

 ![Screenshot 2025-03-20 at 4.14.50 PM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/8/8e0f3d6af4ef3c425a29b49e95a425e0475671f9.png)  
 ![Screenshot 2025-03-20 at 4.14.33 PM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/1/1b260b484693d82fd1a301ff0b63781bd66d78eb.png)  
 ![Screenshot 2025-03-20 at 4.15.08 PM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/b/b0ff1c6f44409cd9fb9ae2bb1697ac5a50359cf4.png)

---

<div class="post-metadata">

### Author: ![thecasemaster](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/thecasemaster/32/1196_2.png) [@thecasemaster](https://community.noloco.io/u/thecasemaster)
#### Post date: [March 20, 2025, 9:23pm UTC](https://community.noloco.io/t/min-max-character-counter-indicator-for-text-inputs/1686/5 "2025-03-20T21:23:25Z")

</div>

You could also add a formula field in that does the calculation for you and have that be displayed in the subtitle of your container. Might take a second to update when the user stops typing, but should update pretty fast.

 ![Screenshot 2025-03-20 at 4.22.46 PM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/b/ba5c7e8930687f2d985b90e518e9c1732474edbd.png)
