nurmuhammet/nova-inputmask
A Laravel Nova field that adds input masking to forms, helping users enter formatted values like phone numbers, dates, and currency consistently. Configure masks easily for cleaner data entry in Nova resources.
Install the field
composer require nurmuhammet/nova-inputmask
Because this is a Nova field (not a standalone package), it must be installed in an app that already has laravel/nova in composer.json and a compiled Nova asset pipeline. Pull it in as you would any Nova field dependency and commit the resulting composer.lock.
First place to look
README.md — usually the only documentation; check the version constraint it lists for Nova (3.x vs 4.x are not interchangeable — Nova 4 moved to Inertia/Vue 3, and a field built for Nova 3 will not render).src/*.php — the field class, typically extending Laravel\Nova\Fields\Text. Look for the fluent methods (mask(), inputmask(), options(), withMeta()) and what they push into meta.resources/js/components/FormField.vue — confirms which inputmask API the field actually calls (new Inputmask(opts).mask(el)) and whether it applies the mask on mounted, on value watch, or both. This determines how "update" forms behave.dist/js/field.js — if this is stale relative to resources/js, you are looking at old code. Check git log on dist/.First use case (5 minutes)
Mask a phone number on a User resource:
use Nurmuhammet\NovaInputmask\NovaInputmask; // namespace may differ — verify in src/
public function fields(Request $request)
{
return [
ID::make()->sortable(),
Text::make('Name'),
NovaInputmask::make('Phone')
->mask('(999) 999-9999')
->rules('required', 'string', 'max:20'),
];
}
Then run php artisan optimize:clear (or at minimum php artisan view:clear) — Nova caches its compiled asset manifest, and a freshly installed field often appears as a plain text input until you clear it. If the mask still does not render, npm run dev inside vendor/nurmuhammet/nova-inputmask and copy dist/js/field.js, or register the compiled asset via a service provider's Nova::script().
Given the 0-star count and 0 dependents, budget time to verify the field against your Nova major version before wiring it into production resources.
Treat the mask as a display layer, not a data contract. The value posted to your controller is the string the user typed with mask characters unless the underlying inputmask options include removeMaskOnSubmit: true (which many of these wrappers do not enable by default). Standardize on one side:
prepareForValidation() to strip non-digits, or->resolveUsing(fn ($v) => preg_replace('/\D/', '', $v)) for the form display, and keep DB columns unformatted.The second is usually cleaner for phone/SSN/credit-card fields, since indexes, search (->searchable()), and exports all operate on the raw column.
Reuse masks across resources. Rather than repeating magic strings, subclass or wrap:
class PhoneInput extends NovaInputmask
{
public function __construct($name, $attribute = null, $resolveCallback = null)
{
parent::__construct($name, $attribute, $resolveCallback);
$this->mask('(999) 999-9999');
}
}
Or expose per-resource variants via a config array and a factory method (InputMask::phone('Phone'), InputMask::currency('Price')). This keeps resource files short and makes a future swap to a maintained alternative a one-file change.
Common alias configurations (inputmask.js aliases the field typically passes through):
->inputmask(['alias' => 'currency', 'groupSeparator' => ',', 'digits' => 2, 'digitsOptional' => false, 'removeMaskOnSubmit' => false])
->inputmask(['alias' => 'datetime', 'inputFormat' => 'dd/mm/yyyy'])
->inputmask(['alias' => 'email'])
->mask('9999-9999-9999-9999') // credit card
For currency, remember the alias emits a string with separators — pair it with a numeric cast on the model and a numeric validation rule, or the value will round-trip inconsistently.
Conditional masks. If the mask depends on another field's value (e.g., "type of identifier" → SSN vs EIN), push dynamic meta at field-construction time:
NovaInputmask::make('Identifier')
->withMeta(['maskOptions' => $request->user()->account_type === 'business'
? '99-9999999'
: '999-99-9999']),
and confirm the Vue component watches field.maskOptions rather than reading it once in mounted(). If it only reads on mount, you will need to override the component.
Compose with Nova field modifiers. These fields are ordinary Nova fields, so ->rules(), ->nullable(), ->default(), ->hideFromIndex(), ->onlyOnForms(), ->fillUsing(), and ->help() all work. Use fillUsing() when you want the server-side canonicalization to happen exactly once, in the field, rather than scattered across FormRequests:
->fillUsing(function ($request, $model, $attribute) {
$model->{$attribute} = preg_replace('/\D/', '', $request->input($attribute));
})
This is often the single most useful integration point — it lets the mask stay purely cosmetic.
Use in generated forms. If you build forms programmatically (Nova 4's Nova::form() / Laravel Nova's field container), instantiate the class directly; it behaves like any other field object and does not require resource registration.
composer.json for the laravel/nova constraint the package declares — and if it declares none, assume "tested against the author's Nova version only."php artisan nova:publish --force and hard-refresh the browser. A stale field.js shows up as "the mask works on create but not edit," which is almost always a bundle/reload problem, not a code bug.dist/ may be out of date or absent. Zero-star packages sometimes ship source without a build. If dist/js/field.js is missing, you must npm install && npm run prod in the vendor directory (and re-do it after every composer update), or vendor the built file into your own resources/js.0 in numeric masks. Currency/number masks can coerce '' to '0' on blur, silently turning nullable decimals into zeros. Guard with ->nullable() and a sometimes|nullable|numeric rule, and verify by submitting an empty form.removeMaskOnSubmit defaults. Confirm this option in the Vue component. If it is false (common), your validation rules like digits:10 will reject (555) 123-4567, and MySQL VARCHAR(10) will reject the formatted string. Normalize either client-side (option) or server-side (prepareForValidation) — do not rely on Nova to do it.->searchable() queries the raw column. If you store formatted strings, searches for 5551234 fail against (555) 123-4567. Prefer storing digits for searchable fields.Invalid inputmask etc.). If no errors and no mask, check the Vue component is actually imported in nova.mix.js or the package's provider — many of these wrappers register assets only via a service provider's boot(), which can silently no-op if the provider is not auto-discovered (composer dump-autoload if you see provider issues).->component('your-custom-field') if the class exposes it (inherited from Nova's Field), pointing at your own Vue component that wraps the field and adds options the package doesn't expose (e.g., onBeforeMask, jitMasking, placeholder). For global defaults, a tiny JS snippet calling Inputmask.extendDefaults({ clearIncomplete: true }) in your own Nova asset is less invasive than patching the vendor file.Number, Select, Date (the native Nova field), or Textarea will either fail to render the mask or fight the underlying component's value handling. Use it only where a text input is acceptable.mounted() call. If the package does not watch this.field.value, a custom component that re-applies inputmask on the value watcher resolves it.inputmask version. For a single form, inlining inputmask.js in your own small custom Nova field (~60 lines of Vue) is often less work than debugging a dormant package — and leaves you in control of the asset pipeline and version pins.How can I help you explore Laravel packages today?