Documentation View source on GitHub

Blade Forms

Getting Started

Blade Forms is a collection of reusable Blade form components implementing Tailwind CSS. With support for Alpine.js, Livewire and native Laravel Requests.

Example Form

The Evil Rabbit Jumped over the Fence.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, velit. 

<x-form-sections>
    <x-form-section :title="__('Example Form')" grid-columns="4">
        <x-slot:description>
            The Evil Rabbit Jumped over the Fence.
        </x-slot:description>

        <x-form-input name="input" label="Input" :column-span="3">
            <x-slot:description>
                <x-form-help>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, velit.</x-form-help>
            </x-slot:description>
        </x-form-input>

        <x-form-input type="number" name="number" label="Number" :column-span="2" default="0" />

        <x-form-select name="select" label="Select" :column-span="2" default="foo" :options="[
            'foo' => 'Foo',
            'bar' => 'Bar',
        ]" />

        <x-form-textarea name="message" label="Message" column-span="full" default="Dear diary, today was a good day..." />

        <x-form-group label="Newsletter" :column-span="2">
            <x-form-checkbox name="subscribe_to_newsletter_a" label="Subscribe to newsletter - A" default />
            <x-form-checkbox name="subscribe_to_newsletter_b" label="Subscribe to newsletter - B" default />
        </x-form-group>

        <x-form-group name="newsletter_frequency" label="Newsletter frequency" inline :column-span="2">
            <x-form-radio name="newsletter_frequency" value="daily" label="Daily" default />
            <x-form-radio name="newsletter_frequency" value="weekly" label="Weekly" />
        </x-form-group>

        <x-form-toggle name="agree_terms" label="Agree with terms" :column-span="3" default />
    </x-form-section>
</x-form-sections>

Installation

Require the Blade Forms package using Composer:

composer require distortedfusion/blade-forms

Installing Tailwind CSS

Blade Forms requires the Tailwind Forms plugin. Run the following command to install Tailwind CSS with the Tailwind Forms plugin:

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

Once installed you can import the tailwind.config.preset.js in your existing tailwind.config.js file, this will configure the Tailwind Forms plugin. Lastly include the Blade Forms resources in your existing tailwind.config.js content section:

import bladeForms from './vendor/distortedfusion/blade-forms/tailwind.config.preset'

export default {
    presets: [bladeForms],
    content: [
        './vendor/distortedfusion/blade-forms/resources/**/*.blade.php',
        ...
    ]
    ...
}

Installing Blade Colors

Colors are managed trough Blade Colors. Blade Colors offers Tailwind CSS compatible, CSS variable based, color palettes. You will find full documentation on the dedicated documentation page.

Blade Colors is automatically installed with Blade Forms. After installation the @bladeColor directive needs be added to your layouts <head> section:

<html>
<head>
    <title>DDFSN</title>

    @bladeColor
</head>
    <body>
    </body>
</html>

Customizing Theme Colors

Blade Forms implements the default primary and gray color definitions offered by Blade Colors. You can customize this to your liking, for a detailed explanation please refer to the dedicated documentation page.

Publishing Configuration

You can publish the package configuration using the following command:

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

Publishing the package configuration allows you to disable or add components.

Publishing Views

You can publish the package views using the following command:

php artisan vendor:publish --tag=blade-forms-views

After publishing you can modify the views from your application's /resources/views/vendor/blade-forms directory.

Version Compatibility

Laravel PHP Package
9.x ^8.0 >= 2.0
10.x ^8.1 >= 2.0
11.x ^8.2 >= 2.0

Only the currently supported PHP versions are listed. Please refer to previous releases of this package for support for older PHP or Laravel versions.

Next Usage