Nova Input Group

A Laravel Nova4 text field formatted as input group

GitHub forks GitHub issues

This custom field allow to append or prepend text and/or heroicon icon. Text can also be HTML. For HTML, a dedicated component is used intead of v-html directive. HTML markup is sanitazed previously sanitized using DOMPurify library to avoid vulnaribility. Note that when you HMTL you can also use Emojis icons.

Installation

composer require eom-plus/nova-input-group

Usage

Import it in your resources and add the InputGroup to fields method. We have added various methods to add flexibility to the component. You can append , prepend or both at the same time.

...
use EomPlus\NovaInputGroup\InputGroup;

public function fields(Request $request)
{
    return [
        ID::make('ID', 'id')->sortable(),
        Text::make('Name', 'name'),
        InputGroup::make('Subdomain', 'subdomain')
           ->appendIcon('cube', 'after')
           ->append('<i>@example.com</i>')
           ->prependIcon('cube')
           ->prepend('test')
           ->prependExtraClasses('bg-green-500 text-white')
           ->asHtml()  

    ];
}
...

But we have maintained the old method for backward compatibility with Decency Input Group

Example using legacy way

...
use EomPlus\NovaInputGroup\InputGroup;

public function fields(Request $request)
{
    return [
        ID::make('ID', 'id')->sortable(),
        Text::make('Name', 'name'),

        InputGroup::make('Subdomain', 'subdomain')
           ->position('after')
           ->text('@example.com'),

    ];
}
...

Methods

prepend(value) Prepend text to input field
prependIcon(name, position) Prepend heroicon to input field. You can choose between 'before' and 'after'. When not used, 'before' is used.
prependExtraClasses(value) Prepend extra css classes to input field to change background or text color for example.
append(value) Append text to input field
appendIcon(name, position) Append heroicon to input field. You can choose between 'before' and 'after'. When not used, 'before' is used.
appendExtraClasses(value) Append extra css classes to input field to change background or text color for example.
asHtml() render value as HTML

Legacy methods for backwards compatibility (avoid to use them)

position(text) You can choose between 'before' and 'after'. When not used, 'before' is used.
text(value) The text to be displayed.

Changelog

Please see CHANGELOG for more information on what has changed recently.

TODO

Support other kind of field
Testcases
PS4 code compliance
More examples
Fix field length
Add buttons and dropdown support

Security and contributions.

If you discover any security related issues, please use the issue tracker. All PRs are welcome

Credits

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

Other Packages You Might Like

Nova Rating Field - A Star rating Nova 4 field to use in your Laravel Nova apps.
Nova Feedback Field - An Emoji feedback Nova 4 field to use in your Laravel Nova apps.
Nova Input Group - A Laravel Nova 4 text field formatted as input group
Nova Signature - A Laravel Nova 4 signature pad

Take a look to our Github repositories as we have a lot of forked nova components with fixes that are still not merge into main owner branch.

License

The MIT License (MIT). Please see License File for more information.

eom-plus/nova-input-group

A Laravel Nova field.