Nova Charcounted Fields Laravel Package

Getting Started

Install the field package into a Nova-enabled Laravel app:

composer require marshmallow/nova-charcounted-fields

Because Nova field packages often ship compiled JS/CSS, run the publish step if the service provider registers assets:

php artisan vendor:publish --provider="Marshmallow\NovaCharcountedFields\FieldServiceProvider"

Look first at:

1. The package's src/ directory to confirm the exact field class names (typically CharcountedText and CharcountedTextarea, or similar).
2. composer.json for the supported laravel/nova constraint — this matters more than usual since the package is archived.
3. Any resources/js / dist folder to see how the counter is bound (input event vs. reactive Nova field).

First use case — drop the field into a Nova resource in place of a standard Text/Textarea:

use Marshmallow\NovaCharcountedFields\CharcountedText;
use Marshmallow\NovaCharcountedFields\CharcountedTextarea;

public function fields(NovaRequest $request)
{
    return [
        CharcountedText::make('Title')
            ->rules('required', 'max:60')
            ->maxlength(60),

        CharcountedTextarea::make('Description')
            ->rules('max:500')
            ->maxlength(500)
            ->rows(5),
    ];
}

The value of the package is purely UX — it shows n/60 as the user types. Laravel validation still does the enforcement.

Implementation Patterns

Mirror maxlength and validation rules. Always set both ->rules('max:X') and the counter length to the same number. The counter is advisory; validation is authoritative. Drift between them is the most common source of "why did my form fail when the counter was green" bugs.

Use it on models with real column limits. The counter is most useful where the DB column is VARCHAR(60) or TEXT with an application-level cap — e.g. SEO titles, meta descriptions, tweet-length fields. Put the field next to a help text:

CharcountedText::make('Meta Title')
    ->rules('required', 'max:60')
    ->maxlength(60)
    ->help('Google truncates around 60 characters.'),

Textarea rows plus counter. For longer content, combine with ->rows() so the counter sits under a reasonably sized box:

CharcountedTextarea::make('Excerpt')
    ->rules('max:300')
    ->maxlength(300)
    ->rows(4)
    ->alwaysShow()
    ->hideFromIndex(),

Keep it out of index/detail views unless the counter is genuinely useful there. On index tables the counter is visual noise; scope with ->hideFromIndex() and ->hideFromDetail(). On detail views, fall back to the plain text if the field's display component doesn't render read-only cleanly.

Pair with ->nullable() and conditional rules when the max depends on context (e.g. different limits for different content types). In that case drive the max from the request or a model attribute and keep the rule in a FormRequest or rules() closure that reads the same source — do not hardcode two different numbers.

Form request + field alignment. If you use FormRequests, the field's ->rules() are often ignored; make sure the FormRequest and the counter both read from a single constant/config value so they can't diverge:

// config/copy.php or a model constant
const META_TITLE_MAX = 60;

CharcountedText::make('Meta Title')->maxlength(self::META_TITLE_MAX);
// FormRequest: 'meta_title' => ['max:'.self::META_TITLE_MAX]

Workflow when customizing markup. Since the package is archived, expect to fork. The typical pattern is to copy the field, subclass the underlying Nova Text/Textarea, and override component() to point at your own Vue component. Keep the vendor package as a reference, not a dependency.

Gotchas and Tips

Archived status is the biggest risk. Last release late 2024, 4 stars, zero dependents, and archived — treat it as a reference implementation rather than a long-term dependency. Before adopting, run composer why-not marshmallow/nova-charcounted-fields against your Nova version, and check whether the maintainer points users at a successor.

Nova version compatibility. Nova 4 → 5 changed field asset tooling and component APIs. An archived package likely targets one major version. Confirm the field actually renders in the Nova version you run; a silent blank field or a missing counter is usually an asset build mismatch, not a PHP error.

Asset caching after install. If the counter doesn't appear, run php artisan nova:publish / php artisan vendor:publish and npm run dev or npm run build in the host app, then hard-refresh. Nova caches compiled assets aggressively.

Counter vs. server validation mismatch. Client-side maxlength on <input> prevents typing past the limit, but paste, programmatic sets, and nova-dependency-container prefill can still exceed it. Always validate server-side. Conversely, if the field enforces maxlength in the browser but the rule allows more, users can be blocked from valid input — decide which side is authoritative and make them agree.

Reactive/dependency fields. If the max length depends on another field, the archived package may not re-render reactively. In that case, either keep the max static or replace the field with a custom Vue component; don't fight the dependency system.

Read-only and index rendering. The counter is a form-input feature. Verify ->readonly() and index/detail views don't show a stray "0/60". If they do, hide the field from those views or override the display callback.

Styling in dark mode. Custom counter markup from older packages frequently assumes light backgrounds. Check Nova's dark theme; if the counter is invisible, that's a CSS variable issue in the published assets — a one-line override in Nova::style() or your app CSS fixes it.

Extension path. Since it's archived, the practical move is to inline the field into your app (app/Nova/Fields/CharcountedText.php) with its Vue component, drop the composer dependency, and own the code. You keep the UX, remove the maintenance risk, and can adapt it to Nova 5+ on your own schedule.

Debugging order. 1) does the field class resolve (composer autoload / vendor/ present), 2) does the Vue component render (Nova asset rebuild), 3) does the counter react to typing (event binding / component version), 4) does the server accept the value (rules). Most "broken" reports are step 2.