README

A powerful Cleave.js (using cleave-zen) input masking component for Filament v3. This package provides a native Filament-like developer experience to enforce input formatting rules, such as credit card numbers, phone numbers, dates, times, and numeral formatting. State unformatting is automatically handled before hydrating the form state to backend.

Requirements

PHP 8.1+
Filament v3.0+

Installation

You can install the package via composer:

composer require agungsp/filament-cleave-input

Optionally, you can publish the views using:

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

Usage

Simply use the CleaveInput component in your Filament Forms schema.

use Agungsp\FilamentCleaveInput\Forms\Components\CleaveInput;

CleaveInput::make('card_number')
    ->creditCard()
    ->label('Credit Card Number');

Credit Card

CleaveInput::make('credit_card')
    ->creditCard()

Numeral Formatting

use Agungsp\FilamentCleaveInput\Enums\NumeralThousandGroupStyle;

CleaveInput::make('price')
    ->numeral()
    ->numeralThousandsGroupStyle(NumeralThousandGroupStyle::THOUSAND) // or 'thousand', 'lakh', 'wan', 'none'
    ->numeralDecimalMark(',')
    ->numeralDecimalScale(2)
    ->numeralIntegerScale(5)
    ->numeralPositiveOnly()
    ->stripLeadingZeroes()

Date

use Agungsp\FilamentCleaveInput\Enums\DateUnit;

CleaveInput::make('date_of_birth')
    ->date()
    ->datePattern([DateUnit::YEAR, DateUnit::MONTH, DateUnit::DAY]) // or ['Y', 'm', 'd']
    ->dateMin('2000-01-01')
    ->dateMax('2024-12-31')

Time

use Agungsp\FilamentCleaveInput\Enums\TimeUnit;
use Agungsp\FilamentCleaveInput\Enums\TimeFormat;

CleaveInput::make('time')
    ->time()
    ->timePattern([TimeUnit::HOUR, TimeUnit::MINUTE]) // or ['h', 'm']
    ->timeFormat(TimeFormat::TWELVE) // or '12', '24'

Custom Blocks

CleaveInput::make('phone')
    ->blocks([4, 3, 3, 4])
    ->delimiter('-')
    ->uppercase()
    ->numericOnly()

Available Methods

The component ships with extensive configuration methods mapped to cleave-zen's JavaScript configuration options:

Mask Types

creditCard()
numeral(bool $enabled = true)
date(bool $enabled = true)
time(bool $enabled = true)

Numeral Options

numeralThousandsGroupStyle(\Agungsp\FilamentCleaveInput\Enums\NumeralThousandGroupStyle | string $style)
numeralIntegerScale(int $scale)
numeralDecimalScale(int $scale)
numeralDecimalMark(string $mark)
numeralPositiveOnly(bool $positiveOnly = true)
stripLeadingZeroes(bool $strip = true)

Date Options

datePattern(array $pattern)
dateMin(string $min)
dateMax(string $max)

Time Options

timePattern(array $pattern)
timeFormat(\Agungsp\FilamentCleaveInput\Enums\TimeFormat | string $format)

Generic & Custom Block Options

blocks(array $blocks)
delimiter(string $delimiter)
delimiters(array $delimiters)
uppercase(bool $uppercase = true)
lowercase(bool $lowercase = true)
numericOnly(bool $numericOnly = true)
cleavePrefix(string $prefix)
tailPrefix(bool $tail = true)

Advanced Options

cleaveOptions(array $options): Override or inject raw JS options directly into the cleave-zen configuration block.

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

License

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

agungsp / filament-cleave-input

Maintainers

Package info

Fund package maintenance!

Statistics

Security