PHPackages                             ariefng/filament-calculator - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ariefng/filament-calculator

ActiveLibrary[Utility & Helpers](/categories/utility)

ariefng/filament-calculator
===========================

Provides a calculator modal action for Filament TextInput fields in Filament panel forms.

v1.2.1(2mo ago)41.2k1MITBladePHP ^8.2CI passing

Since Mar 14Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/ariefng/filament-calculator)[ Packagist](https://packagist.org/packages/ariefng/filament-calculator)[ Docs](https://github.com/ariefng/filament-calculator)[ GitHub Sponsors](https://github.com/ariefng)[ RSS](/packages/ariefng-filament-calculator/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (4)Dependencies (22)Versions (6)Used By (0)

Filament Calculator
===================

[](#filament-calculator)

[![Latest Version](https://camo.githubusercontent.com/a30fcdf301ea039abb8d101164a1242f09a90537b8aaf38867caed3c666827ec/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f61726965666e672f66696c616d656e742d63616c63756c61746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ariefng/filament-calculator)

Provides a calculator modal action for Filament `TextInput` fields in Filament Admin Panel.

> **Note:** Supports Filament **v4** and **v5**. For changes and updates, see the [CHANGELOG](CHANGELOG.md).

[![Filament Calculator plugin](resources/images/filament-calculator-plugin.webp)](resources/images/filament-calculator-plugin.webp)

Table of Contents
-----------------

[](#table-of-contents)

- [Features](#features)
- [Requirements](#requirements)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Usage](#usage)
- [Configuration](#configuration)
- [Styling](#styling)
- [Testing](#testing)
- [Contributing](#contributing)
- [Security Vulnerabilities](#security-vulnerabilities)
- [Credits](#credits)
- [License](#license)

Features
--------

[](#features)

- 🖼️ **Calculator Modal** - Full-featured calculator with arithmetic, percentage, sign toggle, and live result preview
- 🔎 **Readable Display** - Shows locale-aware decimal and thousands separators while typing in the calculator modal
- 🔁 **State Aware Reopen** - Reopens with the current field value, or falls back to a configurable initial value
- 🔧 **Flexible Attachment** - Attach as prefix or suffix action to any TextInput
- ⚙️ **Configurable** - Customize icon, color, modal width, decimal separator, and more
- 🌐 **Multi-language** - Built-in translations for English and Indonesian
- 🔢 **Digit Limit** - Configurable maximum digits for input validation
- ⚡ **Zero Configuration** - Works out of the box with sensible defaults
- 🎨 **Responsive** - Works seamlessly on desktop and mobile

Requirements
------------

[](#requirements)

- Filament 4.0 or 5.0

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require ariefng/filament-calculator
```

Publish the package configuration (optional):

```
php artisan vendor:publish --tag="filament-calculator-config"
```

Publish the package translations (optional):

```
php artisan vendor:publish --tag="filament-calculator-translations"
```

Currently, the package ships with translations for English (`en`) and Indonesian (`id`) only.

If you are using Filament Panels, register the plugin in your panel provider:

```
use Ariefng\FilamentCalculator\CalculatorPlugin;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(CalculatorPlugin::make());
}
```

Quick Start
-----------

[](#quick-start)

Register the plugin in your Filament panel, then attach the calculator action to your form field.

Usage
-----

[](#usage)

Attach the calculator action to a `TextInput` using `prefixAction()` or `suffixAction()`:

```
use Ariefng\FilamentCalculator\Actions\CalculatorAction;
use Filament\Forms\Components\TextInput;

TextInput::make('amount')
    ->suffixAction(CalculatorAction::make());

TextInput::make('amount')
    ->prefixAction(CalculatorAction::make());
```

Since `CalculatorAction` extends Filament's default `Action`, you can use any supported action customization methods on it. If you place the calculator inside another Filament modal or slide-over form, you may want the calculator modal to open on top of the parent modal instead of closing and reopening the parent. Filament documents this pattern here:

Example:

```
TextInput::make('amount')
    ->suffixAction(
        CalculatorAction::make()
            ->overlayParentActions()
    );
```

Example preview:

[![Filament Calculator modal example](resources/images/filament-calculator-plugin.gif)](resources/images/filament-calculator-plugin.gif)

The calculator shows the current expression on the first line and the live computed result on the second line. Both lines use locale-aware thousands and decimal separators in the modal display to keep larger values readable while typing. Pressing `Insert` writes the computed result back to the field, so users do not need to press the equals button first.

When the field already has a value, opening the calculator again will preload that value instead of resetting to `0`. If the field is blank, the calculator falls back to `0`.

When the calculator is used with Filament numeric inputs, the inserted value is normalized before it is written to the field:

- thousands separators are removed
- decimal separators are converted to `.`

This keeps the inserted value compatible with Filament numeric fields and browser `type="number"` inputs, even if the calculator UI is currently displaying values like `1.000,50`.

Configuration
-------------

[](#configuration)

The published config file looks like this:

```
return [
    'max_digits' => 15,

    'initial_value' => 'field',

    'decimal_separator' => 'locale',

    'operator_buttons' => [
        'color' => 'gray',
    ],

    'action' => [
        'icon' => 'heroicon-o-calculator',
        'color' => 'gray',
        'modal_width' => 'sm',
    ],

    'insert_action' => [
        'color' => 'gray',
        'icon' => 'heroicon-o-arrow-down-tray',
        'icon_position' => 'after',
    ],
];
```

Available options:

- `max_digits`: maximum numeric digits allowed in the calculator.
- `initial_value`: controls how the calculator starts. Use `'field'` to preload the current field value and fall back to `0` when blank, or use `0` / `'zero'` to always start from `0`. Default: `'field'`.
- `decimal_separator`: controls the decimal separator used by the calculator. Use `'locale'` to follow the current app locale automatically, `'.'` / `'dot'` to force a dot, or `','` / `'comma'` to force a comma.
- `operator_buttons.color`: color alias used by the `+`, `-`, `*`, `/`, and `=` buttons. Default: `gray`.
- `action.icon`: calculator trigger icon. Default: `heroicon-o-calculator`.
- `action.color`: calculator trigger color. Default: `gray`.
- `action.modal_width`: modal width. Default: `sm`.
- `insert_action.color`: insert button color. Default: `gray`.
- `insert_action.icon`: insert button icon. Default: `heroicon-o-arrow-down-tray`.
- `insert_action.icon_position`: insert button icon position. Default: `after`.

Example:

```
return [
    'max_digits' => 12,

    'initial_value' => 'zero',

    'decimal_separator' => ',',

    'operator_buttons' => [
        'color' => 'warning',
    ],

    'action' => [
        'icon' => 'heroicon-o-bolt',
        'color' => 'success',
        'modal_width' => 'md',
    ],

    'insert_action' => [
        'color' => 'danger',
        'icon' => 'heroicon-o-arrow-left',
        'icon_position' => 'before',
    ],
];
```

Styling
-------

[](#styling)

The calculator styles are automatically loaded globally - no need to run `php artisan filament:assets`.

If you need to customize the calculator's appearance, you can override the CSS by publishing the package's views and adding your custom styles to your application's CSS file.

The calculator modal uses Filament's built-in color variables. By default, the operator buttons and evaluate button use the `gray` color alias, and you can switch them to another Filament color alias through `operator_buttons.color`.

Decimal separator behavior follows the active locale by default. For example, `id` locales use `,` while `en` locales use `.`. The calculator display also applies locale-aware thousands separators while values are being entered. You can override the decimal behavior through the `decimal_separator` config option.

The grouped formatting is display-only inside the calculator modal. Inserted values are always written back as plain numeric strings without thousands separators, and comma decimals are normalized to dots before dispatching the input and change events.

When reopening the calculator, the current field value is preferred when `initial_value` is set to `'field'`. If you prefer a clean calculator every time, set `initial_value` to `0` or `'zero'`.

Calculator insertion also supports `TextInput` components inside Filament `Repeater` items by targeting the field's unique state path instead of relying only on the DOM input id.

Testing
-------

[](#testing)

```
composer test
```

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities.

Security summary from a Claude Opus 4.6 code review:

CategoryStatusXSSNo vulnerabilitiesCode injectionProtected (custom parser, no eval)CSRFN/A (no server-side mutations)Input validationProper (max digits, whitelisted separators)This summary is informational and does not replace responsible disclosure. If you discover a vulnerability, please report it through the security policy linked above.

Credits
-------

[](#credits)

- [Arief Nugraha](https://github.com/ariefng)
- [All Contributors](../../contributors)

This plugin was built entirely with Codex.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

45

—

FairBetter than 91% of packages

Maintenance83

Actively maintained with recent releases

Popularity26

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~6 days

Total

4

Last Release

87d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8ae9e3a264efe601fa71aec9adf69309b15ff08e11fa7b1e38b927fa145c4cc3?d=identicon)[ariefng](/maintainers/ariefng)

---

Top Contributors

[![ariefng](https://avatars.githubusercontent.com/u/77451095?v=4)](https://github.com/ariefng "ariefng (12 commits)")

---

Tags

laravelfilamentfilament-pluginfilamentphpariefngfilament-calculator

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/ariefng-filament-calculator/health.svg)

```
[![Health](https://phpackages.com/badges/ariefng-filament-calculator/health.svg)](https://phpackages.com/packages/ariefng-filament-calculator)
```

###  Alternatives

[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

328482.0k25](/packages/codewithdennis-filament-select-tree)[filament/filament

A collection of full-stack components for accelerated Laravel app development.

3827.0M3.3k](/packages/filament-filament)[jaocero/radio-deck

Turn filament default radio button into a selectable card with icons, title and description.

83328.6k7](/packages/jaocero-radio-deck)[awcodes/richer-editor

A collection of extensions and tools to enhance the Filament Rich Editor field.

399.0k8](/packages/awcodes-richer-editor)[rawilk/filament-password-input

Enhanced password input component for filament.

52250.4k11](/packages/rawilk-filament-password-input)[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

34208.8k10](/packages/schmeits-filament-character-counter)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)