Nova Input Group Laravel Package

Getting Started

Requirements

• Laravel 9+ and Laravel Nova 4.x (Nova is a paid product; this package is useless without it).
• PHP 8.1+ recommended.
• Composer access to Packagist.

Install

composer require decency/nova-input-group

No service provider registration is needed on Nova 4+ — the package auto-discovers. If you are on an older Nova version, verify against the README before assuming discovery works.

First look at the source

Before wiring it into a resource, open the package in vendor/decency/nova-input-group/:

• src/ — the PHP field class (InputGroup.php or similar). This tells you the actual public API (likely prefix(), suffix(), maybe prefixText()/suffixText()).
• resources/js/ — the Vue component. This tells you how the prefix/suffix are rendered and whether it supports Nova's index/detail views.
• README.md — often the only documentation; read it fully because this is a 5-star, low-traction package and the source is the real spec.

First use case

The classic use for an input group is a semantically-paired value the user should not type: a currency symbol, a domain suffix, a unit label.

use Decency\NovaInputGroup\InputGroup;

InputGroup::make('Price')
    ->prefix('$')
    ->suffix('.00')
    ->rules('required', 'numeric', 'min:0')
    ->help('Enter the whole-dollar portion only.'),

If prefix/suffix don't exist under those exact names, the Vue component's props (prefix, suffix, addon) will reveal the right accessors — mirror the field class method names to the props.

Implementation Patterns

1. Currency fields

The highest-value use case. Store the numeric value, display the symbol as decoration:

InputGroup::make('Budget', 'budget_cents')
    ->prefix('$')
    ->rules('required', 'integer', 'min:0')
    ->step(1), // if the underlying Text field exposes numeric input attributes

Keep the prefix out of the stored value — see the Gotchas section for why.

2. Suffix-driven identifiers

For values where the suffix communicates a namespace but is never typed:

InputGroup::make('Subdomain')
    ->suffix('.yourdomain.com')
    ->rules('required', 'alpha_dash', 'max:63')
    ->creationRules('unique:tenants,subdomain')
    ->updateRules('unique:tenants,subdomain,{{resourceId}}'),

3. Paired measurement fields

Group visually related fields on the same row using Nova's fields() / panel layout, so the suffix labels read as a unit:

Panel::make('Dimensions', [
    InputGroup::make('Width')->suffix('cm')->rules('numeric'),
    InputGroup::make('Height')->suffix('cm')->rules('numeric'),
]),

4. Composing with standard Nova Text methods

Because the field almost certainly extends Laravel\Nova\Fields\Text, everything from the parent still applies. Lean on it:

InputGroup::make('Hourly Rate')
    ->prefix('€')
    ->suffix('/hr')
    ->placeholder('0.00')
    ->nullable()
    ->default(0)
    ->help('Displayed in EUR only.')
    ->hideFromIndex()
    ->rules('nullable', 'numeric')
    ->sortable(),

5. Conditional display

Use Nova's native field visibility helpers on top; they are unaffected by the wrapper:

InputGroup::make('Custom Price')
    ->prefix('$')
    ->dependsOn('pricing_model', fn ($field, $request) =>
        $field->hideWhen(fn () => $request->pricing_model !== 'custom')
    ),

6. Detail view rendering

For a resource that should show $1,200.00 on the detail page, the field's resolveUsing is your integration point:

InputGroup::make('Price')->prefix('$')
    ->resolveUsing(fn ($value) => number_format((float) $value, 2)),

Test both index() and detail() render — prefix/suffix rendering on non-form views is the most likely place small packages ship gaps.

Gotchas and Tips

Prefix/suffix are decoration, not data. The prefix and suffix are typically rendered in the Vue component only. They are not part of the submitted value. Do not add validation like regex:/^\$/ — it will never match. Always validate the raw value.

Vet maintenance before production. Five stars and zero dependents means effectively no battle testing. Check the last commit date, the Laravel/Nova version constraint in composer.json, and whether tests exist. If you ship it, consider vendoring or forking so an abandoned repo doesn't block a Nova upgrade.

Nova version pinning is the biggest risk. Custom Nova fields are tightly coupled to the Nova JS build. A Nova minor upgrade (4.x → 5.x, or even 4.20 → 4.30) can break the compiled component. Pin the package version in composer.json and re-test after every Nova upgrade. Symptom of breakage: field renders as a plain Text, or the prefix/suffix disappears, often with a silent console error.

Check whether assets are precompiled. Many small Nova packages ship compiled JS in the tag. If not, you'll need to run npm install && npm run build inside the package and possibly copy the output into your app's app.js/vendor bundle. If the field renders unstyled, this is the first thing to check.

Debugging a field that won't render:

1. Confirm the class name resolves (php artisan nova:field decency/nova-input-group or inspect vendor/).
2. Open the browser console — a Vue component registration error will show here.
3. Verify the field component name matches between the PHP ->component() value and the resources/js/field.js registration.
4. Check nova-components.js / compiled app manifest for the component.

Extend rather than edit. To add new accessors (e.g., ->currency('EUR')), subclass the field in your app and add methods that return $this->withMeta([...]). Never patch vendor/ directly.

class PriceField extends \Decency\NovaInputGroup\InputGroup
{
    public function currency(string $symbol): static
    {
        return $this->prefix($symbol);
    }
}

Index/detail fidelity. Input groups are usually built with form views in mind. If the prefix/suffix fails to render on the index or detail, supply a displayUsing (or resolveUsing) callback that returns the fully formatted string, so read views never look broken even if the component doesn't mount.

Accessibility and mobile. Two small packages often skip aria/for plumbing and don't collapse the suffix on narrow viewports. Manually test on mobile; if the suffix wraps, cap it via custom classes or hide it in the detail view.

Translation. If the field is user-facing in multiple locales, drive the prefix from a translation key passed in rather than hard-coding a symbol:

->prefix(__('fields.currency_symbol'))

Escape hatch. If the package feels too fragile for a critical money field, replacing it with a plain Text field plus help() or a custom formatting callback gets you 80% of the value with none of the upgrade risk. Reserve the input-group field for cases where the visual cue genuinely improves data entry (currency, units, fixed domain suffixes) — and keep an eye on the repo's commit activity for signs of abandonment.