diff --git a/docs/dist/2.x/forms/fields/index.html b/docs/dist/2.x/forms/fields/index.html index 1c1401794..0f1bc4fe6 100644 --- a/docs/dist/2.x/forms/fields/index.html +++ b/docs/dist/2.x/forms/fields/index.html @@ -953,7 +953,7 @@

Range masks can be used to restrict input to a number range:

-
use Filament\Forms\Components\TextInput;
TextInput::make('code')->mask(fn (TextInput\Mask $mask) => $mask
    ->range()
    ->from(1) // Set the lower limit.
    ->to(100) // Set the upper limit.
    ->maxValue(100), // Pad zeros at the start of smaller numbers.
)

In addition to simple pattens, you may also define multiple pattern blocks:

-
use Filament\Forms\Components\TextInput;
TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask
    ->patternBlocks([
        'money' => fn (Mask $mask) => $mask
            ->numeric()
            ->thousandsSeparator(',')
            ->decimalSeparator('.'),
    ])
    ->pattern('$money'),
)

There is also a money() method that is able to define easier formatting for currency inputs. This example, the symbol prefix is €, there is a , thousands separator, and two decimal places:

-
use Filament\Forms\Components\TextInput;
TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '€', thousandsSeparator: ',', decimalPlaces: 2))

You can also control whether the number is signed or not. While the default is to allow both negative and positive numbers, isSigned: false allows only positive numbers:

-
use Filament\Forms\Components\TextInput;
TextInput::make('cost')->mask(fn (TextInput\Mask $mask) => $mask->money(prefix: '€', thousandsSeparator: ',', decimalPlaces: 2, isSigned: false))
@@ -1014,7 +1014,7 @@

You may enable a search input to allow easier access to many options, using the searchable() method:

-
use Filament\Forms\Components\Select;
Select::make('authorId')
    ->label('Author')
    ->options(User::all()->pluck('name', 'id'))
    ->searchable()

You can prevent the placeholder from being selected using the disablePlaceholderSelection() method:

-
use Filament\Forms\Components\Select;
Select::make('status')
    ->options([
        'draft' => 'Draft',
        'reviewing' => 'Reviewing',
        'published' => 'Published',
    ])
    ->default('draft')
    ->disablePlaceholderSelection()

The multiple() method may be used in combination with relationship() to automatically populate from a BelongsToMany relationship:

-
use Filament\Forms\Components\Select;
Select::make('technologies')
    ->multiple()
    ->relationship('technologies', 'name')

You may customize the database query that retrieves options using the third parameter of the relationship() method:

-
use Filament\Forms\Components\Select;
use Illuminate\Database\Eloquent\Builder;
Select::make('authorId')
    ->relationship('author', 'name', fn (Builder $query) => $query->withTrashed())
-
use Filament\Forms\Components\Select;
Select::make('authorId')
    ->relationship('author', 'full_name')

Alternatively, you can use the getOptionLabelFromRecordUsing() method to transform the selected option's Eloquent model into a label. But please note, this is much less performant than using a virtual column:

-
use Filament\Forms\Components\Select;
use Illuminate\Database\Eloquent\Model;
Select::make('authorId')
    ->relationship('author', 'first_name')
    ->getOptionLabelFromRecordUsing(fn (Model $record) => "{$record->first_name} {$record->last_name}")

The titleColumnName() is used to extract the titles out of each product or post. You can choose to extract the option labels using getOptionLabelFromRecordUsing instead if you wish:

-
use Filament\Forms\Components\MorphToSelect;
MorphToSelect::make('commentable')
    ->types([
        MorphToSelect\Type::make(Product::class)
            ->getOptionLabelFromRecordUsing(fn (Product $record): string => "{$record->name} - {$record->slug}"),
        MorphToSelect\Type::make(Post::class)->titleColumnName('title'),
    ])

You may customize the database query that retrieves options using the modifyOptionsQueryUsing() method:

-
use Filament\Forms\Components\MorphToSelect;
use Illuminate\Database\Eloquent\Builder;
MorphToSelect::make('commentable')
    ->types([
        MorphToSelect\Type::make(Product::class)
            ->titleColumnName('name')
            ->modifyOptionsQueryUsing(fn (Builder $query) => $query->whereBelongsTo($this->team)),
        MorphToSelect\Type::make(Post::class)
            ->titleColumnName('title')
            ->modifyOptionsQueryUsing(fn (Builder $query) => $query->whereBelongsTo($this->team)),
    ])

The form opens in a modal, where the user can fill it with data. Upon form submission, the new record is selected by the field.

Since HTML does not support nested <form> elements, you must also render the modal outside the <form> in the view. If you're using the admin panel, this is included already:

-
<form wire:submit.prevent="submit">
    {{ $this->form }}
    <button type="submit">
        Submit
    </button>
</form>
{{ $this->modal }}

When the toggle is stacked, its label is above it:

-
use Filament\Forms\Components\Toggle;
Toggle::make('is_admin')->inline(false)

Toggles may also use an "on icon" and an "off icon". These are displayed on its handle and could provide a greater indication to what your field represents. The parameter to each method must contain the name of a Blade icon component:

-
use Filament\Forms\Components\Toggle;
Toggle::make('is_admin')
    ->onIcon('heroicon-s-lightning-bolt')
    ->offIcon('heroicon-s-user')

You may organize options into columns by using the columns() method:

-
use Filament\Forms\Components\CheckboxList;
CheckboxList::make('technologies')
    ->options([
        'tailwind' => 'Tailwind CSS',
        'alpine' => 'Alpine.js',
        'laravel' => 'Laravel',
        'livewire' => 'Laravel Livewire',
    ])
    ->columns(2)

Populating automatically from a relationship

You may employ the relationship() method to configure a relationship to automatically retrieve and save options from:

-
use Filament\Forms\Components\CheckboxList;
CheckboxList::make('technologies')
    ->relationship('technologies', 'name')
-
use Filament\Forms\Components\CheckboxList;
CheckboxList::make('participants')
    ->relationship('participants', 'full_name')

Alternatively, you can use the getOptionLabelFromRecordUsing() method to transform the selected option's Eloquent model into a label. But please note, this is much less performant than using a virtual column:

-
use Filament\Forms\Components\CheckboxList;
use Illuminate\Database\Eloquent\Model;
CheckboxList::make('participants')
    ->relationship('participants', 'first_name')
    ->getOptionLabelFromRecordUsing(fn (Model $record) => "{$record->first_name} {$record->last_name}")

You may wish to display the options inline() with the label:

-
Radio::make('feedback')
    ->label('Do you like this post?')
    ->boolean()
    ->inline()

You may restrict the minimum and maximum date that can be selected with the picker. The minDate() and maxDate() methods accept a DateTime instance (e.g. Carbon), or a string:

-
use Filament\Forms\Components\DatePicker;
DatePicker::make('date_of_birth')
    ->minDate(now()->subYears(150))
    ->maxDate(now())
+

Uploading large files

+

If you experience issues when uploading large files, such as HTTP requests failing with a response status of 422 in the browser's console, you may need to tweak your configuration.

+

In the php.ini file for your server, increasing the maximum file size may fix the issue:

+
post_max_size = 120M
upload_max_filesize = 120M
+

Livewire also validates file size before uploading. To publish the Livewire config file, run:

+
php artisan livewire:publish --config
+

The max upload size can be adjusted in the rules key of temporary_file_upload. In this instance, KB are used in the rule, and 120MB is 122880KB:

+
'temporary_file_upload' => [
    // ...
    'rules' => ['required', 'file', 'max:122880'],
    // ...
],

Number of files validation

You may customize the number of files that may be uploaded, using the minFiles() and maxFiles() methods:

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('attachments')
    ->multiple()
    ->minFiles(2)
    ->maxFiles(5)