© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
1 reply
haritz

Autofocus on tabs?

So I made a custom login page where I added 2 tabs. Since I'm using tabs, autofocus() is not working anymore. I want to focus the textinput of the first tab. Is there a way to do it?

public function form(Form $form): Form
    {
        return $form
            ->schema([
                Tabs::make('Label')
                    ->tabs([
                        Tabs\Tab::make('Tarjeta')
                            ->translateLabel()
                            ->schema([
                                $this->getCardFormComponent(),
                            ]),
                        Tabs\Tab::make('Usuario')
                            ->translateLabel()
                            ->schema([
                                $this->getLoginFormComponent(),
                                $this->getPasswordFormComponent(),
                            ]),
                    ])
                    ->contained(false)
                    ->activeTab(1)
            ])
            ->statePath('data');
    }

    protected function getCardFormComponent(): Component
    {
        return TextInput::make('card')
            ->label('Tarjeta')
            ->requiredWithout('login')
            ->password()
            ->autofocus()
            ->translateLabel();
    }

    protected function getLoginFormComponent(): Component
    {
        return TextInput::make('login')
            ->label('Usuario')
            ->requiredWithout('card')
            ->autocomplete()
            ->translateLabel();
    }

    protected function getPasswordFormComponent(): Component
    {
        return TextInput::make('password')
            ->label('Contraseña')
            ->requiredWith('login')
            ->password()
            ->autocomplete('current-password')
            ->translateLabel();
    }
public function form(Form $form): Form
    {
        return $form
            ->schema([
                Tabs::make('Label')
                    ->tabs([
                        Tabs\Tab::make('Tarjeta')
                            ->translateLabel()
                            ->schema([
                                $this->getCardFormComponent(),
                            ]),
                        Tabs\Tab::make('Usuario')
                            ->translateLabel()
                            ->schema([
                                $this->getLoginFormComponent(),
                                $this->getPasswordFormComponent(),
                            ]),
                    ])
                    ->contained(false)
                    ->activeTab(1)
            ])
            ->statePath('data');
    }

    protected function getCardFormComponent(): Component
    {
        return TextInput::make('card')
            ->label('Tarjeta')
            ->requiredWithout('login')
            ->password()
            ->autofocus()
            ->translateLabel();
    }

    protected function getLoginFormComponent(): Component
    {
        return TextInput::make('login')
            ->label('Usuario')
            ->requiredWithout('card')
            ->autocomplete()
            ->translateLabel();
    }

    protected function getPasswordFormComponent(): Component
    {
        return TextInput::make('password')
            ->label('Contraseña')
            ->requiredWith('login')
            ->password()
            ->autocomplete('current-password')
            ->translateLabel();
    }
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Autofocus() on modals
FilamentFFilament / ❓┊help
2y ago
Autofocus on custom form
FilamentFFilament / ❓┊help
3y ago
Autofocus on validation error
FilamentFFilament / ❓┊help
3y ago
Autofocus Search
FilamentFFilament / ❓┊help
2y ago