How to change TextInput color and style in Laravel Filament?

How to change TextInput color and style in Laravel Filament?

You can change the style of Laravel Filament TextInput field as shown below.

To change the style (font family, font color, font size etc.) of TextInput fields you need to use the function extraInputAttributes()

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Employee Name')
                    ->description('Enter employee full name.')
                    ->schema([
                        TextInput::make('first_name')
                            ->extraInputAttributes(['style'=>"color:red;"])
                            ->required()
                            ->maxLength(255),
                        TextInput::make('last_name')
                            ->extraInputAttributes([
                                'style'=>"color:blue;font-size:25px;"
                            ])
                            ->required()
                            ->maxLength(255),
                        TextInput::make('middle_name')
                            ->required()
                            ->extraInputAttributes([
                                'style'=>"color:green;font-family:'Brush Script MT', cursive;"
                            ])
                            ->maxLength(255)
                    ])->columns(3),
            ])->columns(3);
    }

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *