Filament Forms Take Too Much Space? Decrease Spacing.

Filament forms come with a large spacing, which you might want to reduce.

By reducing the spacing, the form can look like this:

Creating New Theme

We must create a new theme for this tutorial since we will override some Filament design elements.

Let's start by running a console command:

php artisan make:filament-theme

This will create new theme scaffolding for us. But we still have to do two things:

First, we need to configure Vite by adding our theme as a source:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css' 
            ],
            refresh: true,
        }),
    ],
});

Then we have to register our new theme in a PanelProvider:

app/Providers/Filament/AdminPanelProvider.php:

return $panel
    // ...
    ->viteTheme('resources/css/filament/admin/theme.css');

Once we have done that, we can run:

npm run build
# Or we can run
npm run dev

To either build production assets or watch for changes.

Filament v4

Smaller Inputs with Labels

First, we can apply a smaller font size for the inputs and the label.

resources/css/filament/admin/theme.css:

@import '../../../../vendor/filament/filament/resources/css/theme.css';
 
@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';
 
label.fi-fo-field-label>span.fi-fo-field-label-content { 
    @apply text-xs;
}

Reducing Spacing

Finally, we can reduce the spacing between inputs and the section.

@import '/vendor/filament/filament/resources/css/theme.css';
 
@config 'tailwind.config.js';
 
.fi-input, .fi-select-input, .fi-fo-field-wrp-label > span {
    @apply text-xs;
}
 
form .fi-section.fi-section:not(.fi-section-not-contained):not(.fi-divided)>.fi-section-content-ctn>.fi-section-content, 
.fi-section:not(.fi-section-not-contained).fi-divided>.fi-section-content-ctn>.fi-section-content {
    @apply p-2;
}
 
.fi-sc.fi-sc-has-gap {
    @apply gap-2;
}

Do not forget to run npm run build to see the changes if not using npm run dev.

Filament v3