Download the PHP package vitisstudio/filament-choosable-chips without Composer

Choosable Chips for Filament

A FilamentPHP v5 form field that renders checkbox/radio options as dismissable, colorable, icon-bearing badge chips. The API is patterned after Select/ToggleButtons, so per-option labels, colors, and icons are supplied through the same fluent option map you already know. Each chip is a native Filament badge, so it inherits Filament's theme out of the box.

Features

• Single or multi select from one field — radio semantics by default, checkbox semantics with ->multiple().
• Per-option color, icon, and description, keyed by option value (same shape as Select::options()).
• Dismissable chips using the badge's built-in delete button — click a chip to toggle it, or click the × to clear it.
• Selected check marks with ->checkSelected(), colored independently of the chip.
• Reuses the Filament badge component and color tokens, so it matches your panel with no extra CSS.
• Enum support and an in validation rule derived from the enabled options, like the built-in option fields.

Requirements

• PHP 8.4+
• Filament v5 (filament/forms ^5.0)

Installation

Install the package via Composer:

That's all that's required — the field uses Filament's existing badge styles, so there is nothing to publish or build for the default look.

If you use a custom panel theme, register the package views as a Tailwind source in your theme's CSS so the chip utility classes are compiled:

Then rebuild your theme (npm run build).

Usage

Use the field anywhere you build a Filament schema (a resource form, a custom page, a relation manager, an action, etc.). Single-select (radio semantics) is the default — the field stores a single scalar value:

Multiple selection

Call ->multiple() for checkbox semantics. The field then stores an array of values (cast the underlying Eloquent attribute as array):

Icons and disabled options

Per-option icons accept a Heroicon enum case or an icon name. Disable individual options with ->disableOptionWhen():

Check on selected

Call ->checkSelected() to prepend a check mark to selected chips. The check is colored with ->selectedColor() (defaults to success). When you don't configure checkSelected() explicitly, it turns on automatically for fields that have no per-option icons(), so it never collides with a leading icon. While the check is shown it replaces the dismiss × (the check already signals selection, and clicking the chip clears it):

Sizes

Set the chip size with ->size(), passing a Size enum (or its string value). The default is Size::Medium. Filament's badge styles only render xs and sm distinctly — md, lg, and xl share the base size.

To change the size for every chip field at once, set a default in a service provider:

Enums

Pass a backed enum to options(). Labels, colors, and icons are read automatically from the enum when it implements Filament's HasLabel, HasColor, and HasIcon contracts:

API

Publishing the views

The default look needs no publishing. To customise the chip markup, publish the view and edit it:

The view is published to resources/views/vendor/filament-choosable-chips/.

Example app

A full Filament v5 panel using the field lives in example/README.md for setup; in short:

Testing

To preview the field in a browser without a full app, the package ships a Testbench workbench app:

Upgrading

This package follows semantic versioning. Review the changelog before upgrading across a major version.

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

If you discover a security vulnerability, please email [email protected] rather than using the issue tracker.

Credits

• Dan Poblete
• All Contributors

License

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