Aire is a modern Laravel form builder (demo) with a focus on the same expressive and beautiful code you expect from the Laravel ecosystem.
The most common usage is via the Aire
facade in your blade templates. All method calls
are fluent, allowing for easy configuration of your form components:
{{ Aire::open()
->route('users.update')
->bind($user) }}
<div class="flex flex-col md:flex-row">
{{ Aire::input('given_name', 'First/Given Name')
->id('given_name')
->autoComplete('off')
->groupClass('flex-1 mr-2') }}
{{ Aire::input('family_name', 'Last/Family Name')
->id('family_name')
->autoComplete('off')
->groupClass('flex-1') }}
</div>
{{ Aire::email('email', 'Email Address') }}
{{ Aire::submit('Update User') }}
{{ Aire::close() }}
Install via composer with:
composer require glhd/aire
Aire comes with classes that should work with the default Tailwind class names
out of the box (.bg-blue-600
etc). If you need to change the default class names
for any given element, there are two different ways to go about it.
The first is to publish the aire.php
config file via php artisan vendor:publish --tag=aire-config
and update the default_classes
config for the element you'd like to change:
return [
'default_classes' => [
'input' => 'text-gray-900 bg-white border rounded-sm',
],
];
The second option is to publish custom views via php artisan vendor:publish --tag=aire-views
which gives you total control over component rendering. There's a view file for each component
type (input.blade.php
etc) as well as for component grouping. This gives you the most
flexibility, but means that you have the maintain your views as Aire releases add new
features or change component rendering.
When you publish the aire.php
config file via php artisan vendor:publish --tag=aire-config
,
there are a handful of other configuration options. The config file is fully documented,
so go check it out!
Aire automatically binds old input to your form so that values are preserved if a validation
error occurs. You can also bind data with the bind()
method.
// Bind Eloquent models
Aire::bind(User::find(1));
// Bind an array
Aire::bind(['given_name' => 'Chris']);
// Bind any object
Aire::bind((object) ['given_name' => 'Chris']);
Binding is applied in the following order:
value()
are applied no matter whatAire will automatically add the Laravel _method
field for forms that are not GET
or POST
.
It will also automatically infer the intended method from the route if possible.
// In routes
Route::delete('/photos/{photo}', 'PhotosController@destroy')
->name('photos.destroy');
// In your view
{{ Aire::open()->route('photos.destroy', $photo) }}
{{ Aire::close() }}
Will generate the resulting HTML:
<form action="/photos/1" method="POST">
<input type="hidden" name="_method" value="DELETE" />
</form>
Aire will automatically inject a CSRF token if one exists and the form is not a GET
form.
Simply enable the session and a hidden _token
field will be injected for you.
If you run validations on the server, Aire will pick up any errors and automatically apply error classes and show error messages within the associated input's group.
You can also include an error summary, which provides an easy way to show your users an error at the top of the page if validation failed.
// Print "There are X errors on this page that you must fix before continuing."
{{ Aire::summary() }}
// Also include an itemized list of errors
{{ Aire::summary()->verbose() }}
Javascript validation in Aire is in its early stages. Browser testing is limited, and the
Javascript code hasn't had an performance optimizations applied. That said, Aire
supports automatic client-side validation—simply pass an array of rules or a FormRequest
object and Aire will automatically apply most rules on the client side (thanks
to validatorjs!).
There are a few things that are still either in-the-works or being considered for a later release. These include:
<select>
UI libraries