FilamentPHP v2表单fieldset内添加清空单选框按钮的技术咨询

前提说明 #

首先确保你的三个单选按钮属于同一单选组（即使用相同的name属性），这样才能实现互斥选中，也方便后续清空逻辑的统一处理。示例写法：

Radio::make('selected_option')->label('选项1'),
Radio::make('selected_option')->label('选项2'),
Radio::make('selected_option')->label('选项3'),

方案一：原生Filament Action实现（推荐） #

利用Filament的Action组件结合Livewire状态更新，无需额外自定义视图，代码更简洁：

Fieldset::make('单选组')
    ->schema([
        Radio::make('selected_option')->label('选项1'),
        Radio::make('selected_option')->label('选项2'),
        Radio::make('selected_option')->label('选项3'),
        // 添加清空按钮
        Action::make('reset_radio')
            ->label('清空选中状态')
            ->action(function (callable $set) {
                // 将单选组绑定的字段值设为null，清空选中状态
                $set('selected_option', null);
            })
            // 调整按钮样式，适配fieldset布局
            ->extraAttributes(['class' => 'mt-2 text-sm text-gray-600 hover:text-gray-900']),
    ]),

点击按钮后，Livewire会自动同步表单状态，单选按钮的选中状态会被清空。

方案二：自定义Fieldset视图+JavaScript #

如果需要更灵活的布局控制，可以自定义Fieldset的视图，添加按钮并通过JS处理清空逻辑：

1. 新建自定义视图文件 resources/views/vendor/filament/forms/components/fieldset-with-reset.blade.php：

<fieldset {{ $attributes->merge(['class' => 'rounded-lg border p-4']) }}>
    @if($label)
        <legend class="text-sm font-medium px-1">{{ $label }}</legend>
    @endif

    <div class="space-y-2">
        {{ $slot }}
    </div>

    <!-- 自定义清空按钮 -->
    <button type="button" class="mt-2 text-sm text-gray-500 hover:text-gray-700">
        清空选中状态
    </button>
</fieldset>

<script>
// 给按钮绑定点击事件
document.querySelector('fieldset button:last-child').addEventListener('click', function() {
    const radios = this.closest('fieldset').querySelectorAll('input[type="radio"]');
    radios.forEach(radio => {
        radio.checked = false;
        // 触发change事件，确保Filament表单状态同步
        radio.dispatchEvent(new Event('change'));
    });
});
</script>

2. 在表单中使用自定义视图的Fieldset：

Fieldset::make('单选组')
    ->schema([
        Radio::make('selected_option')->label('选项1'),
        Radio::make('selected_option')->label('选项2'),
        Radio::make('selected_option')->label('选项3'),
    ])
    ->view('vendor.filament.forms.components.fieldset-with-reset'),

内容的提问来源于stack exchange，提问作者missy xoxo