textinput prefix with select dropdown

I am trying to create like image, but I stuck at few points. I can achieve only design like below

Forms\Components\TextInput::make('mobile')
    ->prefix(
        new HtmlString(Blade::render('
            <x-filament::input.select wire:model="status">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">4</option>
            </x-filament::input.select>
        '))
    ),

Forms\Components\TextInput::make('mobile')
    ->prefix(
        new HtmlString(Blade::render('
            <x-filament::input.select wire:model="status">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">4</option>
            </x-filament::input.select>
        '))
    ),

But there are two (or more maybe) problems comes: 1. How can I pass variable and loop through select options 2. How can I have these data (selected) for store/edit etc How can I make it work for these points, or any other alternative ways to achieve the same

Solution:

I end up doing closure, need to return HtmlString ```php ->prefix(function () { return new HtmlString(view('phone-input')); })...

Jump to solution

4 Replies

Lara Zeus•4mo ago

like this plugin https://filamentphp.com/plugins/abanoub-nassem-phone-field or maybe https://github.com/GuavaCZ/filament-clusters you can see how the doing it 🙂

Filament

Phone field by Abanoub Nassem - Filament

Provides a Phone Input field for the Filament V2-V3 Forms, works in Admin-Panel and Forntend-Forms.

GitHub

GitHub - GuavaCZ/filament-clusters: Filament Clusters allows you to...

Filament Clusters allows you to visually cluster multiple fields together. - GuavaCZ/filament-clusters

Lara Zeus•4mo ago

prefix accept Closure so

->prefix(function($record,$state){
    return view('....',['record'=>$record]);
})

->prefix(function($record,$state){
    return view('....',['record'=>$record]);
})

Vp•4mo ago

thanks, will look more

Solution

Vp•4mo ago

I end up doing closure, need to return HtmlString

->prefix(function () {
    return new HtmlString(view('phone-input'));
})

->prefix(function () {
    return new HtmlString(view('phone-input'));
})

Gaming

Programming

textinput prefix with select dropdown