• Components for input, textarea, select, multi-select, checkbox and radio elements
• Support for Tailwind CSS Custom Forms
• Re-populate form with old input
• Validation errors
• Bind a target to a form (or a set of elements) to provide default values
• Support for Spatie's laravel-translatable
• Components classes and Blade views fully customizable
• Support for prefixing the components
• Prepared for other CSS frameworks as well (future release)

• PHP 7.4 + Laravel 7.0 only

You can install the package via composer:

composer require protonemedia/laravel-form-components

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>

The minimum requirement for an input or textarea is the name attribute.

<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" />

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..." />

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 name.

<x-form-textarea name="description" :bind="$video" />

In the example above, where $video is an Eloquent model, the default value will be $video->description.

You can also bind a target by using the @bind directive. This will bind the target to all elements until the @endbind directive.

<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>

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 false.

<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>

Besides the 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 true.

<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 form-group.

You can group checkbox and radio elements on the same horizontal row by adding an inline attribute to the form-group element.

<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>

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.

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. With the form-components.php configuration file, you can change the location of the Blade view per component.

todo

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>

composer test

Please see CHANGELOG for more information about what has changed recently.

Please see CONTRIBUTING for details.

If you discover any security related issues, please email pascal@protone.media instead of using the issue tracker.

• Pascal Baljet
• All Contributors

The MIT License (MIT). Please see License File for more information.