Filament：如何将关联文本输入框置于选中的单选按钮下方

要实现输入框直接显示在选中的单选选项下方，你需要将每个单选选项与对应输入框绑定到同一布局容器中，通过条件渲染控制输入框的显示状态。具体修改如下：

修改后的完整代码 #

namespace App\Livewire;

class CreateProduct extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name'),
                TextInput::make('slug'),
                TextInput::make('detail'),
                // 用Stack包裹所有单选选项与对应输入框
                Stack::make()
                    ->schema([
                        // Draft选项组
                        Stack::make()
                            ->schema([
                                Radio::make('status')
                                    ->label('Draft')
                                    ->value('draft')
                                    ->live(),
                            ]),
                        // Scheduled选项组（含对应输入框）
                        Stack::make()
                            ->schema([
                                Radio::make('status')
                                    ->label('Scheduled')
                                    ->value('scheduled')
                                    ->live(),
                                TextInput::make('scheduled_input')
                                    ->numeric()
                                    ->required()
                                    ->prefix('€')
                                    ->visible(fn(Get $get) => $get('status') === 'scheduled'),
                            ]),
                        // Published选项组（含对应输入框）
                        Stack::make()
                            ->schema([
                                Radio::make('status')
                                    ->label('Published')
                                    ->value('published')
                                    ->live(),
                                TextInput::make('published_input')
                                    ->required()
                                    ->visible(fn(Get $get) => $get('status') === 'published'),
                            ]),
                    ]),
            ])
            ->statePath('data');
    }

    public function render()
    {
        return view('livewire.create-product');
    }
}

核心修改说明 #

1. 移除原布局结构：删掉了独立的Radio::make('status')和Grid组件，因为它们会导致输入框固定在所有单选选项末尾。
2. 分组绑定选项与输入框：将每个单选选项和对应的输入框放在同一个Stack容器中，确保输入框物理位置就在选项下方。
3. 条件控制显示：给每个输入框添加visible判断，仅当对应单选选项被选中时才显示。
4. 保留实时更新：每个单选选项保留live()方法，确保选中状态变化时输入框的可见性实时切换。

这种方式利用HTML原生单选组特性（相同name属性的Radio自动互斥），同时通过Filament的条件渲染实现了输入框与选项的绑定布局。

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