F
Filament•16mo ago
Vinny

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?
Solution:
```php TextInput::make('mobile_number') ->label('Mobile Number') ->required() ->prefixAction(...
Jump to solution
16 Replies
K R A T O S
K R A T O S•16mo ago
You can have prefixAction() and then pass an action with a form component in it to be a select field.
K R A T O S
K R A T O S•16mo ago
Vinny
VinnyOP•16mo ago
!! thanks i will give it a shot 
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(),
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.
K R A T O S
K R A T O S•16mo ago
It works for me!
Vinny
VinnyOP•16mo ago
D:
K R A T O S
K R A T O S•16mo ago
the action should be Filament\Forms\Components\Actions\Action
Vinny
VinnyOP•16mo ago
I was just gonna say that I'm using use Filament\Forms\Components\Actions\Action; 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. Would you mind passing a screenshot of how it looks for you?
K R A T O S
K R A T O S•16mo ago
Vinny
VinnyOP•16mo ago
Interesting, the modal never shows up for me. the rest looks similar
Solution
K R A T O S
K R A T O S•16mo ago
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(),
Vinny
VinnyOP•16mo ago
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. Thanks for the help anyway!!
K R A T O S
K R A T O S•16mo ago
I have another idea for this. But not sure if that's the right way to do it
Vinny
VinnyOP•16mo ago
I'm open to suggestions!
K R A T O S
K R A T O S•16mo ago
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
K R A T O S•16mo ago
Vinny
VinnyOP•16mo ago
Yeah, I was thinking of doing that as well at this point. Thanks!
Want results from more Discord servers?
Add your server