Bio Field with Character Counter

Created on July 9, 2026
htmlnextjs

Live Character Counter

A character counter gives users immediate feedback while they're typing. This example creates a profile bio field that displays the current character count, prevents typing beyond the maximum limit, and disables the Save button until the minimum length requirement has been reached.

Perfect for profile bios, social posts, comments, descriptions, and any field with character limits.

HTML

<form id="profileForm">
    <label for="bio">
        Bio
    </label>

    <textarea
        id="bio"
        name="bio"
        placeholder="Tell everyone a little about yourself..."
    ></textarea>

    <div id="bioCounter"></div>

    <button
        type="submit"
        id="saveBtn"
    >
        Save
    </button>
</form>

JavaScript

import NFSFU234FormValidation from "@nfsfu234/form-validation";

const validator = new NFSFU234FormValidation({
    form: "profileForm"
});

const bio = document.getElementById("bio");
const counter = document.getElementById("bioCounter");

validator.restrictInputWithCounter(
    bio,
    counter,
    {
        minLength: 10,
        maxLength: 280,

        shouldButtonDisable: true,

        formId: "profileForm"
    }
);

What happens?

As the user types, the library automatically:

  • Displays a live character counter.
  • Prevents typing beyond 280 characters.
  • Disables the submit button until at least 10 characters have been entered.
  • Re-enables the button once the minimum requirement is met.

No additional event listeners are required.

Using with Next.js

Because the library interacts with the DOM, initialize it inside a Client Component.

"use client";

import { useEffect } from "react";
import NFSFU234FormValidation from "@nfsfu234/form-validation";

export default function ProfileForm() {
    useEffect(() => {
        const validator = new NFSFU234FormValidation({
            form: "profileForm"
        });

        validator.restrictInputWithCounter(
            document.getElementById("bio"),
            document.getElementById("bioCounter"),
            {
                minLength: 10,
                maxLength: 280,

                shouldButtonDisable: true,

                formId: "profileForm"
            }
        );
    }, []);

    return (
        <form id="profileForm">
            <textarea
                id="bio"
                name="bio"
            />

            <div id="bioCounter"></div>

            <button
                id="saveBtn"
                type="submit"
            >
                Save
            </button>
        </form>
    );
}

Configuration

validator.restrictInputWithCounter(
    inputElement,
    counterElement,
    {
        minLength: 10,
        maxLength: 280,

        shouldButtonDisable: true,

        formId: "profileForm"
    }
);

| Option | Description | |---------|-------------| | minLength | Minimum number of characters required. | | maxLength | Maximum number of characters allowed. | | shouldButtonDisable | Automatically disables and enables the form's submit button. | | formId | The form whose submit button should be controlled. |

Things to know

  • Works with both <input> and <textarea> elements.
  • Automatically updates the counter while the user types.
  • Automatically prevents typing beyond the configured maximum.
  • No manual input event listeners are needed.
  • For complete protection, also validate the field during form submission using HTML validation attributes or the library's validation methods.

Continue learning

← Back to all examples
Bio Field with Character Counter | NFSFU234FormValidation