Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How to use protonemedia/laravel-form-components and give sample code


How to use protonemedia/laravel-form-components and give sample code


To use the protonemedia/laravel-form-components package in your Laravel project, follow these steps:

1. Install the package via Composer:

bash
composer require protonemedia/laravel-form-components

2. If you're using Tailwind CSS, make sure the right plugin (v1 or v2) is installed and configured[1].

3. Here's a quick example of how to use the form components in your Blade templates:

html
<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 />
    <x-form-textarea name="biography" language="nl" placeholder="Dutch Biography" />
    <x-form-textarea name="biography" language="en" placeholder="English Biography" />
    <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>

This example demonstrates the usage of various form components like ``, ``, ``, ``, ``, and ``[1].

4. You can customize the Blade views by publishing the configuration file and views using the following command:

bash
php artisan vendor:publish --provider="ProtoneMedia\LaravelFormComponents\Support\ServiceProvider"

This will create the `form-components.php` configuration file and the Blade views in the `resources/views/vendor/form-components` folder[1][3].

5. In the configuration file, you can change the location of the Blade views per component and define a prefix for the components[3].

The package supports features like model binding, validation, and customization of the component logic and templates[1][3]. It also provides integration with Laravel Livewire and support for the Spatie's Laravel Translatable package[3].

Citations:
[1] https://github.com/protonemedia/laravel-form-components
[2] https://github.com/protonemedia/laravel-form-components/blob/master/composer.json
[3] https://protone.media/nl/blog/laravel-form-components-to-rapidly-build-forms-with-tailwind-css-and-bootstrap-4
[4] https://laracasts.com/discuss/channels/laravel/make-parent-component-property-available-to-child-components
[5] https://sourceforge.net/projects/laravel-form-components.mirror/