版本：5.x

Tags input

简介

标签输入(TagsInput)组件允许你与标签列表进行交互。

默认情况下，标签以 JSON 格式保存：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')

如果你使用 Eloquent 保存 JSON 标签，你应该将 array casts 添加到相应的模型属性中：

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    /**
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'tags' => 'array',
        ];
    }

    // ...
}

TIP

Filament 也支持 spatie/laravel-tags。可查阅插件文档获取更多信息。

逗号分隔标签

你可以允许标签以分隔字符串而非 JSON 格式保存。要进行设置，请将分隔字符传入到 separator() 方法中：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->separator(',')

除了允许静态值之外，separator() 方法也接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Field	`Filament\Forms\Components\Field`	`$component`	The current field component instance.
Get function	`Filament\Schemas\Components\Utilities\Get`	`$get`	A function for retrieving values from the current form data. Validation is not run.
Livewire	`Livewire\Component`	`$livewire`	The Livewire component instance.
Eloquent model FQN	`?string<Illuminate\Database\Eloquent\Model>`	`$model`	The Eloquent model FQN for the current schema.
Operation	`string`	`$operation`	The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Raw state	`mixed`	`$rawState`	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.
State	`mixed`	`$state`	The current value of the field. Validation is not run.

自动标签补全建议

标签输入可以有自动补全建议。要启用该功能，请将建议数组传入到 suggestions() 方法中：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->suggestions([
        'tailwindcss',
        'alpinejs',
        'laravel',
        'livewire',
    ])

除了允许静态值之外，suggestions() 方法也接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Field	`Filament\Forms\Components\Field`	`$component`	The current field component instance.
Get function	`Filament\Schemas\Components\Utilities\Get`	`$get`	A function for retrieving values from the current form data. Validation is not run.
Livewire	`Livewire\Component`	`$livewire`	The Livewire component instance.
Eloquent model FQN	`?string<Illuminate\Database\Eloquent\Model>`	`$model`	The Eloquent model FQN for the current schema.
Operation	`string`	`$operation`	The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Raw state	`mixed`	`$rawState`	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.
State	`mixed`	`$state`	The current value of the field. Validation is not run.

定义拆分键

拆分键(Split Key)允许你映射用户键盘上指定的按键映射到以创建新标签。默认情况下，当用户按下 "Enter" 键时，输入框中会创建新标签。你也可以定义其他键，比如 "Tab" 键、空格键，来创建新标签。要实现该功能，请传入键数组到 splitKeys() 方法：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->splitKeys(['Tab', ' '])

更多可能的按键选项请查阅此处。

除了允许静态值之外，splitKeys() 方法也接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Field	`Filament\Forms\Components\Field`	`$component`	The current field component instance.
Get function	`Filament\Schemas\Components\Utilities\Get`	`$get`	A function for retrieving values from the current form data. Validation is not run.
Livewire	`Livewire\Component`	`$livewire`	The Livewire component instance.
Eloquent model FQN	`?string<Illuminate\Database\Eloquent\Model>`	`$model`	The Eloquent model FQN for the current schema.
Operation	`string`	`$operation`	The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Raw state	`mixed`	`$rawState`	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.
State	`mixed`	`$state`	The current value of the field. Validation is not run.

添加前缀和后缀到单独的标签

在不修改字段的真实状态的情况下，你可以在标签上添加前缀和后缀。如果你需要在不保存的情况下，向用户显示直观的格式，这很有用。该功能可以使用 tagPrefix() 或 tagSuffix() 方法实现：

use Filament\Forms\Components\TagsInput;

TagsInput::make('percentages')
    ->tagSuffix('%')

除了允许静态值之外，tagPrefix() 和 tagSuffix() 方法也接受函数来动态计算它们的值。你可以将各种 utility 作为参数注入到函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Field	`Filament\Forms\Components\Field`	`$component`	The current field component instance.
Get function	`Filament\Schemas\Components\Utilities\Get`	`$get`	A function for retrieving values from the current form data. Validation is not run.
Livewire	`Livewire\Component`	`$livewire`	The Livewire component instance.
Eloquent model FQN	`?string<Illuminate\Database\Eloquent\Model>`	`$model`	The Eloquent model FQN for the current schema.
Operation	`string`	`$operation`	The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Raw state	`mixed`	`$rawState`	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.
State	`mixed`	`$state`	The current value of the field. Validation is not run.

标签重新排序

使用 reorderable() 方法，可以允许用户在字段中对标签重新排序：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->reorderable()

或者，你也可以传入一个布尔值控制标签是否可以重新排序：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->reorderable(FeatureFlag::active())

除了允许静态值之外，reorderable() 方法也接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Field	`Filament\Forms\Components\Field`	`$component`	The current field component instance.
Get function	`Filament\Schemas\Components\Utilities\Get`	`$get`	A function for retrieving values from the current form data. Validation is not run.
Livewire	`Livewire\Component`	`$livewire`	The Livewire component instance.
Eloquent model FQN	`?string<Illuminate\Database\Eloquent\Model>`	`$model`	The Eloquent model FQN for the current schema.
Operation	`string`	`$operation`	The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Raw state	`mixed`	`$rawState`	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.
State	`mixed`	`$state`	The current value of the field. Validation is not run.

修改标签颜色

将标签的颜色传递给 color() 方法，你可以修改标签颜色：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->color('danger')

除了允许静态值之外，color() 方法也接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Field	`Filament\Forms\Components\Field`	`$component`	The current field component instance.
Get function	`Filament\Schemas\Components\Utilities\Get`	`$get`	A function for retrieving values from the current form data. Validation is not run.
Livewire	`Livewire\Component`	`$livewire`	The Livewire component instance.
Eloquent model FQN	`?string<Illuminate\Database\Eloquent\Model>`	`$model`	The Eloquent model FQN for the current schema.
Operation	`string`	`$operation`	The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Raw state	`mixed`	`$rawState`	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.
State	`mixed`	`$state`	The current value of the field. Validation is not run.

去除空白字符

你可以使用 trim() 方法自动去除每个标签首尾的空白字符：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->trim()

你可能希望为所有标签输入全局启用去除首尾空格的功能，这类似于 Laravel 的 TrimStrings 中间件。你可以在服务提供者中使用 configureUsing() 方法来实现这一点：

use Filament\Forms\Components\TagsInput;

TagsInput::configureUsing(function (TagsInput $component): void {
    $component->trim();
});

标签验证

你可以将规则数组传入到 nestedRecursiveRules() 方法中，为每个标签添加验证规则：

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->nestedRecursiveRules([
        'min:3',
        'max:255',
    ])

简介​

逗号分隔标签​

自动标签补全建议​

定义拆分键​

添加前缀和后缀到单独的标签​

标签重新排序​

修改标签颜色​

去除空白字符​

标签验证​

简介

逗号分隔标签

自动标签补全建议

定义拆分键

添加前缀和后缀到单独的标签

标签重新排序

修改标签颜色

去除空白字符

标签验证