Installation

Requirements
New Laravel projects
Existing Laravel projects
Publishing the configuration
Publishing the translations
Upgrade Guide

Requirements

Filament has a few requirements to run:

PHP 8.0+
Laravel v8.0+
Livewire v2.0+

The form builder comes pre-installed inside the admin panel 2.x, but you must still follow the installation instructions below if you're using it in the rest of your app.

New Laravel projects

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

composer require filament/forms:"^2.0"
php artisan forms:install
npm install
npm run dev

These commands will ruthlessly overwrite existing files in your application, hence why we only recommend using this method for new projects.

You're now ready to start building forms!

Existing Laravel projects

You may download the form builder using Composer:

composer require filament/forms:"^2.0"

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 npx tailwindcss init.

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

const colors = require('tailwindcss/colors') 
 
module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.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="{{ str_replace('_', '-', app()->getLocale()) }}">
    <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!

Publishing the configuration

If you wish, you may publish the configuration of the package using:

php artisan vendor:publish --tag=forms-config

Publishing the translations

If you wish to translate the package, you may publish the language files using:

php artisan vendor:publish --tag=forms-translations

Upgrade Guide

To upgrade the package to the latest version, you must run:

composer update
php artisan config:clear
php artisan view:clear

To do this automatically, we recommend adding these commands to your composer.json's post-update-cmd:

"post-update-cmd": [
    // ...
    "@php artisan config:clear",
    "@php artisan view:clear"
],

Installation

#Requirements

#New Laravel projects

#Existing Laravel projects

#Publishing the configuration

#Publishing the translations

#Upgrade Guide