PHPackages                             feadbox/laravel-form-components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. feadbox/laravel-form-components

ActiveLibrary

feadbox/laravel-form-components
===============================

Blade components to rapidly build forms with Tailwind CSS Custom Forms and Bootstrap 4.

2.5.6(4y ago)013MITPHPPHP ^7.4 || ^8.0

Since Jul 17Pushed 4y agoCompare

[ Source](https://github.com/feadbox/laravel-form-components)[ Packagist](https://packagist.org/packages/feadbox/laravel-form-components)[ Docs](https://github.com/protonemedia/laravel-form-components)[ GitHub Sponsors](https://github.com/pascalbaljet)[ RSS](/packages/feadbox-laravel-form-components/feed)WikiDiscussions master Synced today

READMEChangelog (2)Dependencies (8)Versions (41)Used By (0)

Laravel Form Components
=======================

[](#laravel-form-components)

[![Latest Version on Packagist](https://camo.githubusercontent.com/e9874ee0790e077942e59e8de4bf084ab0df52c2127aa1943902e3afc0383754/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f70726f746f6e656d656469612f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/protonemedia/laravel-form-components)[![Build Status](https://camo.githubusercontent.com/e8af16f91563f0c93acb71ae19aeae95075df82ac1dc3027dab951e78c2f9981/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f70726f746f6e656d656469612f6c61726176656c2d666f726d2d636f6d706f6e656e74732f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/protonemedia/laravel-form-components)[![Quality Score](https://camo.githubusercontent.com/8359008b5e04a9c9a992f48d907dbf6fc67fa9a38dbfe234e64e04927a446202/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f70726f746f6e656d656469612f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/protonemedia/laravel-form-components)[![Total Downloads](https://camo.githubusercontent.com/19b0ae3b240f92558a5d8ae07ebe47a0e46c7356359650203df2918763357f54/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f70726f746f6e656d656469612f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/protonemedia/laravel-form-components)[![Buy us a tree](https://camo.githubusercontent.com/130148911f548b001b2ac68a32c0a06559977ca60ada3bf480c72ae4ea093175/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f54726565776172652d2546302539462538432542332d6c69676874677265656e)](https://plant.treeware.earth/protonemedia/laravel-form-components)

A set of Blade components to rapidly build forms with [Tailwind CSS v1](https://tailwindcss-custom-forms.netlify.app), [Tailwind CSS v2](https://tailwindcss-forms.vercel.app) and [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/). Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!

#### ... 👀 There's a Pro version of this package in development: check out [formcomponents.pro](https://formcomponents.pro)!

[](#--theres-a-pro-version-of-this-package-in-development-check-out-formcomponentspro)

### 📺 Want to see this package in action? Join the live stream on November 19 at 14:00 CET:

[](#-want-to-see-this-package-in-action-join-the-live-stream-on-november-19-at-1400-cet-httpsyoutube7enzs4u7xym)

Features
--------

[](#features)

- Components for input, textarea, select, multi-select, checkbox and radio elements.
- Support for Tailwind v1 with [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app).
- Support for Tailwind v2 with [Tailwind Forms](https://tailwindcss-forms.vercel.app/).
- Support for [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.0/components/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 (model binding).
- Support for [Laravel Livewire](https://laravel-livewire.com) v2.
- Support for Spatie's [laravel-translatable](https://github.com/spatie/laravel-translatable).
- Re-populate forms with [old input](https://laravel.com/docs/master/requests#old-input).
- Validation errors.
- [Form method spoofing](https://laravel.com/docs/master/routing#form-method-spoofing).
- Components classes and Blade views fully customizable.
- Support for prefixing the components.

Requirements
------------

[](#requirements)

- PHP 7.4 + Laravel 7.0 and higher

Support
-------

[](#support)

We proudly support the community by developing Laravel packages and giving them away for free. Keeping track of issues and pull requests takes time, but we're happy to help! If this package saves you time or if you're relying on it professionally, please consider [supporting the maintenance and development](https://github.com/sponsors/pascalbaljet).

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require protonemedia/laravel-form-components
```

If you're using Tailwind, make sure the right plugin ([v1](https://github.com/tailwindcss/custom-forms#install) or [v2](https://github.com/tailwindlabs/tailwindcss-forms#installation)) is installed and configured.

Quick example
-------------

[](#quick-example)

```

    @bind($user)

    @endbind

```

[![](https://github.com/pascalbaljetmedia/laravel-form-components/raw/master/quick-example-form.png?raw=true)](https://github.com/pascalbaljetmedia/laravel-form-components/blob/master/quick-example-form.png?raw=true)

Preface
-------

[](#preface)

Generating HTML in PHP is always quite opinionated and limited. Blade Components are great because additional attributes are passed down to the element. That's why we prefer writing forms using components instead of using PHP builders. This way, you don't have to write extensions or custom code for any attribute you pass in. Let's take a look at this `x-form` example.

The `action` attribute is optional, but you can pass a hard-coded, primitive value to the component using a simple HTML attribute. PHP expressions and variables can be passed to the component as well via attributes that use the `:` character as a prefix. Do you need Alpine.js or VueJS directives? No problem!

```

```

```

```

Configuration
-------------

[](#configuration)

You can switch frameworks by updating the `framework` setting in the `form-components.php` configuration file. Use the `artisan vendor:publish` command to publish the configuration file.

```
return [
    'framework' => 'bootstrap-4',
];
```

No further configuration is needed unless you want to [customize the Blade views and components](#customize-the-blade-views).

Usage
-----

[](#usage)

### Input and textarea elements

[](#input-and-textarea-elements)

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

```

```

Optionally you can add a `label` attribute, which can be computed as well.

```

```

You can also choose to use a `placeholder` instead of a label, and of course you can change the `type` of the element.

```

```

By default every element shows validation errors but you can hide them if you want.

```

```

### Default value and binds

[](#default-value-and-binds)

You can use the `default` attribute to specify the default value of the element.

```

```

#### Binding a target

[](#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 `name`.

```

```

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

#### Binding a target to multiple elements

[](#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 `@endbind` directive.

```

    @bind($video)

    @endbind

```

You can even mix targets!

```

    @bind($user)

        @bind($userProfile)

        @endbind

    @endbind

```

#### Override or remove a binding

[](#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 `false`.

```

    @bind($video)

    @endbind

```

#### Laravel Livewire

[](#laravel-livewire)

You can use the `@wire` and `@endwire` directives to bind a form to a Livewire component. Let's take a look at the `ContactForm` example from the official Livewire documentation.

```
use Livewire\Component;

class ContactForm extends Component
{
    public $name;
    public $email;

    public function submit()
    {
        $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
        ]);

        Contact::create([
            'name' => $this->name,
            'email' => $this->email,
        ]);
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}
```

Normally you would use a `wire:model` attribute to bind a component property with a form element. By using the `@wire` directive, this package will automatically use the `wire:model` attribute instead of the `name` attribute.

```

    @wire

    @endwire

    Save Contact

```

Additionally, you can pass an optional modifier to the `@wire` directive. This feature was added in v2.4.0. If you're upgrading from a previous version *and* you published the Blade views, you should republish them *or* update them manually.

```

    @wire('debounce.500ms')

    @endwire

```

### Select elements

[](#select-elements)

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',
];
```

```

```

You can provide a *slot* to the `select` element as well:

```

   Belgium
   The Netherlands

```

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.

```

```

#### Using Eloquent relationships

[](#using-eloquent-relationships)

This package has built-in support for `BelongsToMany`, `MorphMany`, and `MorphToMany` relationships. To utilize this feature, you must add both the `multiple` and `many-relation` attribute to the select element.

In the example below, you can attach one or more tags to the bound video. By using the `many-relation` attribute, it will correctly retrieve the selected options (attached tags) from the database.

```

    @bind($video)

    @endbind

```

### Checkbox elements

[](#checkbox-elements)

Checkboxes have a default value of `1`, but you can customize it as well.

```

```

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

```

```

### Radio elements

[](#radio-elements)

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.

```

```

When you're not using target binding, you can use the `default` attribute to mark a radio element as checked:

```

```

### Old input data

[](#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.

### Handling translations

[](#handling-translations)

This package supports `spatie/laravel-translatable` out of the box. You can add a `language` attribute to your element.

```

```

This will result in the following HTML:

```

```

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

[](#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.

#### Component logic

[](#component-logic)

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 `vendor/protonemedia/laravel-form-components/src/Components` folder.

### Prefix the components

[](#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:

```

```

### Error messages

[](#error-messages)

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. The element takes an optional `bag` attribute to specify the `ErrorBag`, which defaults to `default`.

```

```

### Submit button

[](#submit-button)

The label defaults to *Submit* but you can use the slot to provide your own content.

```

    Send

```

### Bootstrap 4

[](#bootstrap-4)

You can switch to [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) 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](#customize-the-blade-views) and update the view file.

#### Input prepend and append

[](#input-prepend-and-append)

In addition to the Tailwind features, there is also support for [input groups](https://getbootstrap.com/docs/4.1/components/forms/#auto-sizing). Use the `prepend` and `append` slots to provide the contents.

```

    @slot('prepend')
        @
    @endslot

    @slot('append')
        .protone.media
    @endslot

```

#### Help text

[](#help-text)

You can add [block-level help text](https://getbootstrap.com/docs/4.1/components/forms/#help-text) to any element by using the `help` slot.

```

    @slot('help')

            Your username must be 8-20 characters long.

    @endslot

```

### Testing

[](#testing)

```
composer test
```

### Changelog

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information about what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Other Laravel packages
----------------------

[](#other-laravel-packages)

- [`Laravel Analytics Event Tracking`](https://github.com/protonemedia/laravel-analytics-event-tracking): Laravel package to easily send events to Google Analytics.
- [`Laravel Blade On Demand`](https://github.com/protonemedia/laravel-blade-on-demand): Laravel package to compile Blade templates in memory.
- [`Laravel Cross Eloquent Search`](https://github.com/protonemedia/laravel-cross-eloquent-search): Laravel package to search through multiple Eloquent models.
- [`Laravel Eloquent Scope as Select`](https://github.com/protonemedia/laravel-eloquent-scope-as-select): Stop duplicating your Eloquent query scopes and constraints in PHP. This package lets you re-use your query scopes and constraints by adding them as a subquery.
- [`Laravel Eloquent Where Not`](https://github.com/protonemedia/laravel-eloquent-where-not): This Laravel package allows you to flip/invert an Eloquent scope, or really any query constraint.
- [`Laravel FFMpeg`](https://github.com/protonemedia/laravel-ffmpeg): This package provides an integration with FFmpeg for Laravel. The storage of the files is handled by Laravel's Filesystem.
- [`Laravel Paddle`](https://github.com/protonemedia/laravel-paddle): Paddle.com API integration for Laravel with support for webhooks/events.
- [`Laravel Verify New Email`](https://github.com/protonemedia/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`](https://github.com/protonemedia/laravel-webdav): WebDAV driver for Laravel's Filesystem.

### Security

[](#security)

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

Credits
-------

[](#credits)

- [Pascal Baljet](https://github.com/protonemedia)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

Treeware
--------

[](#treeware)

This package is [Treeware](https://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/pascalbaljetmedia/laravel-form-components) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 97.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~18 days

Recently: every ~52 days

Total

22

Last Release

1740d ago

Major Versions

1.4.1 → 2.0.02020-09-09

PHP version history (2 changes)1.0.0PHP ^7.4

2.3.0PHP ^7.4 || ^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/1fa1e6a18db0b7fc7cf07029bc9acc8ef54594138e1d1a113e3978d4dae72be5?d=identicon)[davutkmbr](/maintainers/davutkmbr)

---

Top Contributors

[![pascalbaljet](https://avatars.githubusercontent.com/u/8403149?v=4)](https://github.com/pascalbaljet "pascalbaljet (80 commits)")[![davutkmbr](https://avatars.githubusercontent.com/u/18721207?v=4)](https://github.com/davutkmbr "davutkmbr (2 commits)")

---

Tags

laraveltailwindbootstrapformFormstailwindcssform-builderprotonemediabootstrap4laravel-form-builderlaravel-form-componentsform-components

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/feadbox-laravel-form-components/health.svg)

```
[![Health](https://phpackages.com/badges/feadbox-laravel-form-components/health.svg)](https://phpackages.com/packages/feadbox-laravel-form-components)
```

###  Alternatives

[proengsoft/laravel-jsvalidation

Validate forms transparently with Javascript reusing your Laravel Validation Rules, Messages, and FormRequest

1.1k2.3M49](/packages/proengsoft-laravel-jsvalidation)[glhd/aire

Modern Laravel form builder. Remembers old input, retrieves error messages and comes with beautiful Tailwind-based markup out of the box.

545265.3k7](/packages/glhd-aire)[barryvdh/laravel-form-bridge

This packages integrates Symfony Form Component in Laravel.

163354.8k1](/packages/barryvdh-laravel-form-bridge)[inkvizytor/fluentform

Form builder for Laravel

3416.2k](/packages/inkvizytor-fluentform)[tomjamon/laravel-custom-html

Custom HTML generator for Laravel (Based on LaravelCollective HTML)

1018.6k](/packages/tomjamon-laravel-custom-html)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)