Number Input Counter for Filament

Just another quantity input number counter field for Filament.

Installation

You can install the package via composer:

composer require vicmans/filament-number-input

Add the following line to tailwind.config.js inside the content section

export default {
  presets: [],
  content: [
    ...
    './vendor/vicmans/filament-number-input/resources/views/*.blade.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-number-input-views"

and you can edit the component.

Usage

use Vicmans\FilamentNumberInput\FilamentNumberInput;

protected function form(): array
{
    return [
        ...
        FilamentNumberInput::make('quantity')
            ->minValue(1)
            ->maxValue(20)
            ->minusIcon('heroicon-o-arrow-left')
            ->default(5);
        ...
    ];
}

Methods and Props

Method	Description	Default Value	Usage
step	Set interval for number input field	1	step(2)
default	Default value	0	default(5)
maxValue	The max value that allow the user to input		maxValue(10)
minValue	The min value that allow the user to input		minValue(2)
disableManualInput	User can type the input	false	disableManualInput() This disable manual input, user can change the value using buttons.
minusIcon	Decrease button icon		minusIcon('heroicon-o-minus')
plusIcon	Increase button icon		plusIcon('heroicon-o-plus')

Other methods from Filament Forms Field.

Testing

composer test

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• vicmans
• All Contributors

License

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