Nova Input Group

A Laravel Nova4 text field formatted as input group

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

• Decency
• Tim Diels
• All Contributors

⭐️ 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.