Installation

New Laravel projects

To get started with the form builder quickly, you can set up Alpine.js, TailwindCSS and Livewire with just one command:

composer require filament/forms && php artisan forms:install && npm install && npm run dev

This command will ruthlessly overwrite existing files in your application, hence why we only recommend using it for new projects.

You're now ready to start building forms!

Existing Laravel projects

Please note that this package is incompatible with filament/filament v1, until v2 is released in late 2021. This is due to namespacing collisions.

You may download the form builder using Composer:

composer require filament/forms

The package uses Alpine.js, Tailwind CSS, the Tailwind Forms plugin, and the Tailwind Typography plugin. You may install these through NPM:

npm install alpinejs tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev

To finish installing Tailwind, you must create a new tailwind.config.js file in the root of your project. The easiest way to do this is by running npm tailwindcss init.

In tailwind.config.js, enable JIT mode, register the plugins you installed, and add custom colors used by the form builder:

const colors = require('tailwindcss/colors')
 
module.exports = {
mode: 'jit',
purge: [
'./resources/**/*.blade.php',
'./vendor/filament/forms/resources/views/**/*.blade.php',
],
theme: {
extend: {
colors: {
danger: colors.rose,
primary: colors.blue,
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}

Of course, you may specify your own custom primary and danger colors, which will be used instead.

In your webpack.mix.js file, Register Tailwind CSS as a PostCSS plugin :

const mix = require('laravel-mix')
 
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
])

In /resources/css/app.css, import filament/forms vendor CSS and TailwindCSS:

@import '../../vendor/filament/forms/dist/module.esm.css';
 
@tailwind base;
@tailwind components;
@tailwind utilities;

In /resources/js/app.js, import Alpine.js, the filament/forms plugin, and register it:

import Alpine from 'alpinejs'
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
 
Alpine.plugin(FormsAlpinePlugin)
 
window.Alpine = Alpine
 
Alpine.start()

Compile your new CSS and JS assets using npm run dev.

Finally, create a new resources/views/layouts/app.blade.php layout file for Livewire components:

<!DOCTYPE html>
<html lang="{{ \Illuminate\Support\Str::of(app()->getLocale())->lower()->kebab() }}">
<head>
<meta charset="utf-8">
 
<meta name="application-name" content="{{ config('app.name') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<title>{{ config('app.name') }}</title>
 
<!-- Styles -->
<style>[x-cloak] { display: none !important; }</style>
@livewireStyles
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
 
<!-- Scripts -->
@livewireScripts
<script src="{{ mix('js/app.js') }}" defer></script>
@stack('scripts')
</head>
 
<body class="antialiased">
{{ $slot }}
</body>
</html>

You're now ready to start building forms!

Still need help? Join our Discord community or open a GitHub discussion

Enjoying Filament?

We are open source at heart. To allow us to build new features, fix bugs, and run the community, we require your financial support.

Sponsor Filament on GitHub