表单
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
{
protected $casts = [
'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 create , edit , or view . |
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 create , edit , or view . |
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 create , edit , or view . |
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 create , edit , or view . |
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 create , edit , or view . |
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 create , edit , or view . |
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. |
标签验证
你可以将规则数组传入到 nestedRecursiveRules()
方法中,为每个标签添加验证规则:
use Filament\Forms\Components\TagsInput;
TagsInput::make('tags')
->nestedRecursiveRules([
'min:3',
'max:255',
])
Edit on GitHubStill need help? Join our Discord community or open a GitHub discussion