Laravel Form Components
A set of Blade components to rapidly build forms with Tailwind CSS Custom Forms and Bootstrap 4. Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!
- Components for input, textarea, select, multi-select, checkbox and radio elements.
- Support for Tailwind CSS Custom Forms and Bootstrap 4 Forms.
- Component logic independent from Blade views, the Tailwind and Bootstrap views use the same logic.
- Bind a target to a form (or a set of elements) to provide default values.
- Support for Spatie's laravel-translatable.
- Re-populate forms with old input.
- Validation errors.
- Components classes and Blade views fully customizable.
- Support for prefixing the components.
- PHP 7.4 + Laravel 7.0 only
You can install the package via composer:
composer require protonemedia/laravel-form-components
Make sure the Tailwind plugin is installed and added to your
tailwind.config.js file. If you're starting a new project, you can use the Frontend preset for Tailwind CSS which includes the Custom Forms plugin as well.
There is no configuration needed unless you want to customize the Blade views and components.
<x-form> @bind($user) <x-form-input name="last_name" label="Last Name" /> <x-form-select name="country_code" :options="$options" /> <x-form-select name="interests" :options="$multiOptions" label="Select your interests" multiple /> <!-- \Spatie\Translatable\HasTranslations --> <x-form-textarea name="biography" language="nl" placeholder="Dutch Biography" /> <x-form-textarea name="biography" language="en" placeholder="English Biography" /> <!-- Inline radio inputs --> <x-form-group name="newsletter_frequency" label="Newsletter frequency" inline> <x-form-radio name="newsletter_frequency" value="daily" label="Daily" /> <x-form-radio name="newsletter_frequency" value="weekly" label="Weekly" /> </x-form-group> <x-form-group> <x-form-checkbox name="subscribe_to_newsletter" label="Subscribe to newsletter" /> <x-form-checkbox name="agree_terms" label="Agree with terms" /> </x-form-group> <x-form-submit /> @endbind </x-form>
Input and textarea elements
The minimum requirement for an
textarea is the
<x-form-input name="company_name" />
Optionally you can add a
label attribute, which can be computed as well.
<x-form-input name="company_name" label="Company name" /> <x-form-input name="company_name" :label="trans('forms.company_name')" />
You can also choose to use a
placeholder instead of a label, and of course you can change the
type of the element.
<x-form-input type="email" name="current_email" placeholder="Current email address" />
By default every element shows validation errors but you can hide them if you want.
<x-form-textarea name="description" :show-errors="false" />
Default value and binds
You can use the
default attribute to specify the default value of the element.
<x-form-textarea name="motivation" default="I want to use this package because..." />
Binding a target
Instead of setting a default value, you can also pass in a target, like an Eloquent model. Now the component will get the value from the target by the
<x-form-textarea name="description" :bind="$video" />
In the example above, where
$video is an Eloquent model, the default value will be
Binding a target to multiple elements
You can also bind a target by using the
@bind directive. This will bind the target to all elements until the
<x-form> @bind($video) <x-form-input name="title" label="Title" /> <x-form-textarea name="description" label="Description" /> @endbind </x-form>
You can even mix targets!
<x-form> @bind($user) <x-form-input name="full_name" label="Full name" /> @bind($userProfile) <x-form-textarea name="biography" label="Biography" /> @endbind <x-form-input name="email" label="Email address" /> @endbind </x-form>
Override or remove a binding
You can override the
@bind directive by passing a target directly to the element using the
:bind attribute. If you want to remove a binding for a specific element, pass in
<x-form> @bind($video) <x-form-input name="title" label="Title" /> <x-form-input :bind="$videoDetails" name="subtitle" label="Subtitle" /> <x-form-textarea :bind="false" name="description" label="Description" /> @endbind </x-form>
name attribute, the
select element has a required
options attribute, which should be a simple key-value array.
$countries = [ 'be' => 'Belgium', 'nl' => 'The Netherlands', ];
<x-form-select name="country_code" :options="$countries" />
If you want a select element where multiple options can be selected, add the
multiple attribute to the element. If you specify a default, make sure it is an array. This applies to bound targets as well.
<x-form-select name="country_code" :options="$countries" multiple :default="['be', 'nl']" />
Checkboxes have a default value of
1, but you can customize it as well.
<x-form-checkbox name="subscribe_to_newsletter" label="Subscribe to newsletter" />
If you have a fieldset of multiple checkboxes, you can group them together with the
form-group component. This component has an optional
label attribute and you can set the
name as well. This is a great way to handle the validation of arrays. If you disable the errors on the individual checkboxes, it will one show the validation errors once. The
form-group component has a
show-errors attribute that defaults to
<x-form-group name="interests" label="Pick one or more interests"> <x-form-checkbox name="interests" :show-errors="false" value="laravel" label="Laravel" /> <x-form-checkbox name="interests" :show-errors="false" value="tailwindcss" label="Tailwind CSS" /> </x-form-group>
Radio elements behave exactly the same as checkboxes, except the
show-errors attribute defaults to
false as you almost always want to wrap multiple radio elements in a
You can group checkbox and radio elements on the same horizontal row by adding an
inline attribute to the
<x-form-group name="notification_channel" label="How do you want to receive your notifications?" inline> <x-form-checkbox name="notification_channel" value="mail" label="Mail" /> <x-form-checkbox name="notification_channel" value="slack" label="Slack" /> </x-form-group>
Old input data
When a validation errors occurs and Laravel redirects you back, the form will be re-populated with the old input data. This old data will override any binding or default value.
This package supports
spatie/laravel-translatable out of the box. You can add a
language attribute to your element.
<x-form-input name="title" language="en" :bind="$book" />
This will result in the following HTML:
<input name="title[en]" value="Laravel: Up & Running" />
To get the validation errors from the session, the name of the input will be mapped to a dot notation like
title.en. This is how old input data is handled as well.
Customize the blade views
Publish the configuration file and Blade views with the following command:
php artisan vendor:publish --provider="ProtoneMedia\LaravelFormComponents\Support\ServiceProvider"
You can find the Blade views in the
resources/views/vendor/form-components folder. Optionally, in the
form-components.php configuration file, you can change the location of the Blade view per component.
You can bind your own component classes to any of the elements. In the
form-components.php configuration file, you can change the class per component. As the logic for the components is quite complex, it is strongly recommended to duplicate the default component as a starting point and start editing. You'll find the default component classes in the
Prefix the components
You can define a prefix in the
form-components.php configuration file.
return [ 'prefix' => 'tailwind', ];
Now all components can be referenced like so:
<x-tailwind-form> <x-tailwind-form-input name="company_name" /> </x-tailwind-form>
By the default, the errors messages are positioned under the element. To show these messages, we created a
FormErrors component. You can manually use this component as well.
<x-form> <x-form-input name="company_name" :show-errors="false" /> <!-- other elements --> <x-form-errors name="company_name" /> </x-form>
The label defaults to Submit but you can use the slot to provide your own content.
<x-form-submit> <span class="text-green-500">Send</span> </x-form-submit>
You can switch to Bootstrap 4 by updating the
framework setting in the
form-components.php configuration file.
return [ 'framework' => 'bootstrap-4', ];
There is a little bit of styling added to the
form.blade.php view to add support for inline form groups. If you want to change it or remove it, publish the assets and update the view file.
Input prepend and append
In addition to the Tailwind features, there is also support for input groups. Use the
append slots to provide the contents.
<x-form-input name="username" label="Username"> @slot('prepend') <span>@</span> @endslot </x-form-input> <x-form-input name="subdomain" label="Subdomain"> @slot('append') <span>.protone.media</span> @endslot </x-form-input>
You can add block-level help text to any element by using the
<x-form-input name="username" label="Username"> @slot('help') <small class="form-text text-muted"> Your username must be 8-20 characters long. </small> @endslot </x-form-input>
Please see CHANGELOG for more information about what has changed recently.
Please see CONTRIBUTING for details.
Other Laravel packages
Laravel Analytics Event Tracking: Laravel package to easily send events to Google Analytics.
Laravel Blade On Demand: Laravel package to compile Blade templates in memory.
Laravel Cross Eloquent Search: Laravel package to search through multiple Eloquent models.
Laravel FFMpeg: This package provides an integration with FFmpeg for Laravel. The storage of the files is handled by Laravel's Filesystem.
Laravel Paddle: Paddle.com API integration for Laravel with support for webhooks/events.
Laravel Verify New Email: This package adds support for verifying new email addresses: when a user updates its email address, it won't replace the old one until the new one is verified.
Laravel WebDAV: WebDAV driver for Laravel's Filesystem.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.
This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.