Custom css for filament form field

Certainly! In Filament, you have a couple of options for adding custom CSS to a form field:

1. Using extraAttributes for Inline Styles or Classes

If you just want to add a custom class or inline style to a default Filament field, you can use the extraAttributes method:

TextInput::make('name')
    ->extraAttributes([
        'class' => 'my-custom-class',
        'style' => 'background-color: #f0f0f0; border-radius: 8px;',
    ])

Then, in your app's CSS file, you can define the styles for .my-custom-class.

2. Publishing and Overriding Filament's CSS

If you want to globally override Filament's styles, you can publish Filament's assets and modify the CSS, or add your own CSS file and include it in your layout.

For example, in your resources/css/app.css:

.my-custom-class {
    background-color: #f0f0f0;
    border-radius: 8px;
}

And make sure your CSS is loaded in your layout.

3. Creating a Custom Field Component

If you need more control, you can create a custom form field component. This is more advanced but gives you full flexibility.

Example:

• Run the command to generate a custom field:

  php artisan make:filament-custom-field CustomInput
  

• Edit the generated component and add your custom CSS/classes.
• Use your custom field in the form.

---

Summary:
For simple custom CSS, use extraAttributes or add a custom class and define it in your CSS. For more complex needs, create a custom field component.

Let me know if you need an example of a custom field!