DOCSEARCHbyAlgolia
Submit Docs

Aire

website·Indexed 31 days ago

https://airephp.com/

A fluent and expressive PHP library for building forms, featuring built-in client-side validation using Laravel's rule syntax and support for Alpine.js. It includes a variety of form components, theme support for Bootstrap and Tailwind CSS, and a chainable API accessible via the Aire facade or aire() helper.

Tokens
6.4K
Snippets
43
Records
52
Agent score
57%

What's inside Aire

  1. Install Aire for Laravel

    Install the Aire form builder package using Composer.
    composer require glhd/aire

  2. Enable Alpine.js reactivity in Aire forms

    Aire provides built-in support for Alpine.js, allowing developers to add reactive interactions to server-generated forms. By calling the asAlpineComponent() method on an Aire form instance, Aire automatically:

    1. Initializes the x-data attribute on the <form> tag using the form's existing data binding logic.
    2. Adds x-model attributes to each form element to sync them with the Alpine.js state.
    {{ Aire::route('demo.store')->asAlpineComponent() }}

  3. Use the resourceful helper for model-based forms

    The resourceful() helper automates route names, HTTP methods, and model binding based on a provided model instance. It distinguishes between 'create' (new model) and 'update' (existing model) automatically.

    • Basic usage: Aire::resourceful($model)
    • Custom route name: Aire::resourceful($model, 'custom_name')
    • Nested routes: Aire::resourceful($model, 'nested.route', [$parentModel])
    // Update existing user (infers users.update and PUT)
{{ Aire::resourceful(User::find(1)) }}

// Create new user (infers users.store and POST)
{{ Aire::resourceful(new User()) }}

// Nested route: teams.users.update with parameters [$team, $user]
{{ Aire::resourceful($user, 'teams.users', [$team]) }}

  4. Create a generic text input with Aire

    Use Aire::input() to create a standard input field. You can chain methods to define the ID, requirement status, input type, placeholder, default value, and help text. The variant() method allows for size adjustments (e.g., lg() for large or sm() for small).
    Aire::input('input', 'Sample Input')
  ->id('sample-input-field')
  ->required()
  ->type('text')
  ->placeholder('Placeholder text')
  ->value('Pre-filled with data')
  ->helpText('This is a regular input element');

// Large variant
Aire::input()->label('Large input')
  ->variant()->lg();

// Small variant
Aire::input()->label('Small Input')
  ->variant()->sm();

  5. Display server-side validation errors

    Aire automatically applies error classes and displays error messages within the input's group when server-side validation fails. You can also render a summary of all errors at the top of the page.
    // Print a simple error count message
{{ Aire::summary() }}

// Print a detailed itemized list of errors
{{ Aire::summary()->verbose() }}

  6. Add data attributes to Aire elements

    Use the data($key, $value) method to add data- attributes. Passing NULL as the value unsets the attribute. If the value is an array or an object implementing Jsonable, JsonSerializable, or Arrayable, Aire automatically JSON-encodes it.

  7. Manipulate Aire elements using fluent attribute methods

    Aire provides a fluent API for setting HTML attributes on elements. Most attribute methods return the element instance, allowing for method chaining to configure elements concisely.
    {{ Aire::input()->label('Demo Input')->id('demo') }}

  8. Install the Aire Bootstrap theme

    To use Bootstrap with the Aire framework, install the glhd/aire-bootstrap package via Composer. Once installed, Aire will automatically apply the corresponding Bootstrap classes to its components.
    composer require glhd/aire-bootstrap

  9. Handle HTTP method spoofing and CSRF

    Aire automatically handles Laravel's security and routing requirements:

    • Method Spoofing: For forms that are not GET or POST, Aire automatically adds the _method hidden field. It can infer the method from the route name.
    • CSRF Protection: A hidden _token field is automatically injected for non-GET forms if a session is enabled.
    // In routes
Route::delete('/photos/{photo}', 'PhotosController@destroy')->name('photos.destroy');

// In view: Aire generates <form action="/photos/1" method="POST">
// with <input type="hidden" name="_method" value="DELETE" />
{{ Aire::open()->route('photos.destroy', $photo) }}
{{ Aire::close() }}

  11. Manage element grouping and labels

    Aire elements can be grouped to automatically generate wrapping markup for labels and help text. Grouping is often enabled by default. You can control this behavior using grouped() or withoutGroup(). Grouped elements provide the following methods:

    • label(string $text): Sets the label text.
    • helpText(string $text): Adds instructions below the element.
    • valid() / invalid(): Manually marks the group's validation state.
    • errors($message): Adds a specific error message below the element.
    • prepend(string $text) / append(string $text): Adds inline text before or after the element.

  12. Set arbitrary or non-standard HTML attributes

    To set attributes that are not standard HTML (such as Livewire's wire:click), use the setAttribute($key, $value) method.