README

Filament Clusters

Filament Clusters allows you to visually cluster multiple fields together.

Functionality wise it is similar to the Group component except that the fields look visually as one, which is useful for tighly coupled form fields, such as a currency and amount which only make sense together.

Showcase

Support us

Your support is key to the continual advancement of our plugin. We appreciate every user who has contributed to our journey so far.

While our plugin is available for all to use, if you are utilizing it for commercial purposes and believe it adds significant value to your business, we kindly ask you to consider supporting us through GitHub Sponsors. This sponsorship will assist us in continuous development and maintenance to keep our plugin robust and up-to-date. Any amount you contribute will greatly help towards reaching our goals. Join us in making this plugin even better and driving further innovation.

Installation

You can install the package via composer:

composer require guava/filament-clusters

Usage

It's simple as:

use Guava\FilamentClusters\Forms\Cluster;

Cluster::make([
    // Your schema
]);

For example for a currency and amount cluster:

use Guava\FilamentClusters\Forms\Cluster;

Cluster::make([
    \Filament\Forms\Components\Select::make('currency')
        ->options(['EUR', 'USD']),
    
    \Filament\Forms\Components\TextInput::make('amount')
        ->numeric()
        ->required(),
]),

Customization

You can add a label, hint, helper text or actions to your Cluster:

use Guava\FilamentClusters\Forms\Cluster;

Cluster::make([
    // Schema
])
    ->label('My label')
    ->hint('Useful hint')
    ->helperText('Help when you\'re stuck');

Grid

By default, the cluster automatically distributes the space among each child component. You can however customize it using columns and columnSpan for each child, just like you're used to from Filament:

use Guava\FilamentClusters\Forms\Cluster;

Cluster::make([
    // Schema
])->columns(5);

Vertical Clusters

To create a vertical clusters, you simply need set the columns of the Cluster to 1:

Cluster::make([
    // Schema
])->columns(1);

Different Breakpoints

The breakpoints use the same system as Filament`s columns, so you can customize each breakpoint by passing in an array:

Cluster::make([
    // Schema
])->columns([
    'default' => 1,
    'lg' => 3,
]);

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.

guava / filament-clusters

Maintainers

Details