README

Speed up data entry in Filament by enabling users to create and select new relationship options directly from the search dropdown - no modals, no interruptions.

The Problem

When using Filament's Select component with relationships, users must:

Search for an option
Realize it doesn't exist
Click "Create new option"
Fill in a modal form
Submit the modal
Find and select the newly created option

This workflow interrupts the user's flow and slows down data entry.

The Solution

Quick Add Select adds a "+ Add 'search term'" option directly in the search results. When clicked, it:

Instantly creates the new record using the search term
Automatically selects it
Continues the workflow without interruption

Installation

You can install the package via composer:

composer require cocosmos/filament-quick-add-select

Usage

Simply add ->quickAdd() to any Select component with a relationship:

use Filament\Forms\Components\Select;

Select::make('profession_id')
    ->relationship('profession', 'name')
    ->searchable()
    ->quickAdd()

That's it! Now when users search for a term that doesn't exist, they'll see an "+ Add 'term'" option.

Multiple Select

Works seamlessly with multiple selects:

Select::make('skills')
    ->multiple()
    ->relationship('skills', 'name')
    ->searchable()
    ->quickAdd()

Custom Label

Customize the "Add" button label:

Select::make('category_id')
    ->relationship('category', 'name')
    ->searchable()
    ->quickAdd(label: fn(string $search) => "Create new: {$search}")

Or use a simple string template:

->quickAdd(label: "New category: {search}")

Disable Quick Add

You can conditionally disable the feature:

->quickAdd(enabled: auth()->user()->can('create', Category::class))

Translations

The plugin includes translations for the default "Add" label in multiple languages:

🇬🇧 English: "+ Add ':term'"
🇫🇷 French: "+ Ajouter « :term »"
🇩🇪 German: "+ Hinzufügen ':term'"
🇪🇸 Spanish: "+ Añadir ':term'"
🇮🇹 Italian: "+ Aggiungi ':term'"
🇵🇹 Portuguese: "+ Adicionar ':term'"

Publishing Translations

To customize translations, publish the language files:

php artisan vendor:publish --tag=quick-add-translations

Then edit the files in lang/vendor/quick-add/.

Adding New Languages

Create a new translation file in lang/vendor/quick-add/{locale}/quick-add.php:

<?php

return [
    'add' => '+ Your translation ":term"',
];

Screenshots

With Quick Add

New workflow: Search, click "Add", done!

Multiple Selection

Works perfectly with multiple selects

How It Works

The plugin extends Filament's Select component using Laravel's macro system. When you add ->quickAdd():

It overrides the search results to include a special "Add" option when no exact match is found
When the "Add" option is selected, it creates the record immediately
The newly created record's ID replaces the temporary selection
The component displays the proper label from the database

All of this happens client-side with Livewire, so there's no page refresh.

Requirements

PHP 8.1+
Laravel 11.0+
Filament 4.0+

Compatibility

✅ Works with single and multiple selects
✅ Compatible with all Filament themes
✅ Supports dark mode
✅ Multi-language support
✅ Works in panels, resources, forms, and custom pages

Limitations

Only works with relationship selects (not options-based selects)
Creates records with only the title attribute populated (usually 'name')
For complex models requiring additional fields, use the traditional createOptionForm() approach

Testing

composer test

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Credits

License

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

cocosmos / filament-quick-add-select

Maintainers

Details