Is it possible to create a TextInput component with a prefix that is a SelectInput?

I want the prefix to be a select action. A common example of this type of usage is international phone numbers (see image for example).

Would I have to create a custom component for this?

rQkUqNefkNTSJAkAgcOdrlfFK-XEXXMouu2MFb12zyo.format-webp.webp

Solution

TextInput::make('mobile_number')
                ->label('Mobile Number')
                ->required()
                ->prefixAction(
                    Action::make('country')
                        ->icon('heroicon-o-user')
                        ->form([
                            Select::make('mobile_phone_country')
                                ->options(['test' => 'test'])
                        ])
                )
                ->tel(),

TextInput::make('mobile_number')
                ->label('Mobile Number')
                ->required()
                ->prefixAction(
                    Action::make('country')
                        ->icon('heroicon-o-user')
                        ->form([
                            Select::make('mobile_phone_country')
                                ->options(['test' => 'test'])
                        ])
                )
                ->tel(),

Jump to solution

K R A T O S•8/25/23, 3:21 PM

You can have and then pass an action with a form component in it to be a select field.

K R A T O S•8/25/23, 3:21 PM

Check it out here => https://filamentphp.com/docs/3.x/infolists/actions#adding-an-affix-action-to-a-entry:~:text=%23-,Adding%20an%20affix%20action%20to%20a%20entry,-Certain%20entries%20support

Actions - Infolist Builder - Filament

VinnyOP•8/25/23, 3:29 PM

!! thanks i will give it a shot

VinnyOP•8/25/23, 3:42 PM

This does not seem to work :( Not only is an icon required (it gives me an error if i dont give it one), the select input does not show up at all.

VVinny ```php TextInput::make('mobile_number') ->label('Mobile Number') ->required() ->...

K R A T O S•8/25/23, 3:46 PM

It works for me!

VinnyOP•8/25/23, 3:46 PM

K R A T O S•8/25/23, 3:47 PM

the action should be

VinnyOP•8/25/23, 3:47 PM

I was just gonna say that I'm using

VinnyOP•8/25/23, 3:47 PM

I'm not sure if it makes a difference but this is happening inside a wizard. I'll give it another look to see if I did anything wrong.

VinnyOP•8/25/23, 3:48 PM

Would you mind passing a screenshot of how it looks for you?

K R A T O S•8/25/23, 3:49 PM

VinnyOP•8/25/23, 3:50 PM

Interesting, the modal never shows up for me.

VinnyOP•8/25/23, 3:50 PM

the rest looks similar

Solution

K R A T O S•8/25/23, 3:51 PM

TextInput::make('mobile_number')
                ->label('Mobile Number')
                ->required()
                ->prefixAction(
                    Action::make('country')
                        ->icon('heroicon-o-user')
                        ->form([
                            Select::make('mobile_phone_country')
                                ->options(['test' => 'test'])
                        ])
                )
                ->tel(),

TextInput::make('mobile_number')
                ->label('Mobile Number')
                ->required()
                ->prefixAction(
                    Action::make('country')
                        ->icon('heroicon-o-user')
                        ->form([
                            Select::make('mobile_phone_country')
                                ->options(['test' => 'test'])
                        ])
                )
                ->tel(),

VinnyOP•8/25/23, 3:53 PM

Yep, copy pasted the same exact code, same issues.
Regardless though, I was hoping it would serve as just a dropdown instead of modal with a dropdown.
I'll mark this as solved unless you perhaps know a way to have the button show a dropdown instead of opening a modal.

VinnyOP•8/25/23, 3:53 PM

Thanks for the help anyway!!

K R A T O S•8/25/23, 3:56 PM

I have another idea for this. But not sure if that's the right way to do it

VinnyOP•8/25/23, 3:56 PM

I'm open to suggestions!

K R A T O S•8/25/23, 3:57 PM

You can create a custom field, using filaments fields.... Like use the select and text input to create your own input field... With this, you can specifically get what you want and how you want it as you can style it

K R A T O S•8/25/23, 3:58 PM

https://filamentphp.com/docs/3.x/forms/fields/custom

Custom fields - Form Builder - Filament

VinnyOP•8/25/23, 3:58 PM

Yeah, I was thinking of doing that as well at this point. Thanks!

TextInput::make('mobile_number') ->label('Mobile Number') ->required() ->prefixAction( Action::make('country') ->icon('heroicon-o-user') ->form([ Select::make('mobile_phone_country') ->options(['test' => 'test']) ]) ) ->tel(),