PHPackages                             pojow/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. pojow/laravel-form-components

ActiveLibrary

pojow/laravel-form-components
=============================

Ready-to-use and customizable form components.

v1.0.1(1y ago)0152MITPHPPHP 8.1.\*|8.2.\*|8.3.\*|8.4.\*

Since Jun 7Pushed 1y agoCompare

[ Source](https://github.com/pojow/laravel-form-components)[ Packagist](https://packagist.org/packages/pojow/laravel-form-components)[ Docs](https://github.com/pojow/laravel-form-components)[ RSS](/packages/pojow-laravel-form-components/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (9)Versions (5)Used By (0)

[![Laravel Form Components illustration](/docs/laravel-form-components.png)](/docs/laravel-form-components.png)

 [ ![Latest Stable Version](https://camo.githubusercontent.com/811fc94c9111df93f587aacc7cbcb3a155cd3f3b1719abc2ca7c5654b506f288/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f706f6a6f772f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265) ](https://github.com/pojow/laravel-form-components/releases "Latest Stable Version") [ ![Total Downloads](https://camo.githubusercontent.com/576d8aaecdd2b9c193929579ecef72eb9773c8bde010d3ca440ec62de4b51c2a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f706f6a6f772f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265) ](https://packagist.org/packages/pojow/laravel-form-components "Total Downloads") [ ![Build Status](https://github.com/pojow/laravel-form-components/actions/workflows/ci.yml/badge.svg) ](https://github.com/pojow/laravel-form-components/actions "Build Status") [ ![Coverage Status](https://camo.githubusercontent.com/d05dde428d19fe99d4382115daa218d2e974e07325343d6f29c3fcb9555a8efc/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f706f6a6f772f6c61726176656c2d666f726d2d636f6d706f6e656e74732f62616467652e7376673f6272616e63683d6d61696e) ](https://coveralls.io/github/pojow/laravel-form-components?branch=main "Coverage Status") [ ![License: MIT](https://camo.githubusercontent.com/08cef40a9105b6526ca22088bc514fbfdbc9aac1ddbf8d4e6c750e3a88a44dca/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e737667) ](/LICENSE.md "License: MIT")

---

### This project is a maitained fork of [okipa/laravel-form-components](https://github.com/Okipa/laravel-form-components)

[](#this-project-is-a-maitained-fork-of-okipalaravel-form-components)

---

Save time and take advantage of a set of dynamical, ready-to-use and fully customizable form components.

Components can be used with the following UI frameworks:

- Bootstrap 5
- TailwindCSS 3 (upcoming feature)

Compatibility
-------------

[](#compatibility)

LaravelPHPPackage^9.0 | ^10.0 | ^11.08.1.\* | 8.2.\* | 8.3.\*^1.0Usage example
-------------

[](#usage-example)

Just call the components you need in your views and let this package take care of the HTML generation time-consuming part.

```

        {{ __('Cancel') }}

```

And get these components displayed:

[![Laravel Form Components screenshot](/docs/screenshot.png)](/docs/screenshot.png)

Table of Contents
-----------------

[](#table-of-contents)

- [Installation](#installation)
- [Configuration](#configuration)
- [Views](#views)
- [Components](#components)
    - [Form](#form)
    - [Input](#input-and-textarea)
    - [Textarea](#input-and-textarea)
    - [Select](#select)
    - [Checkbox](#checkboxes-toggle-switches-and-radios)
    - [Switch](#checkboxes-toggle-switches-and-radios)
    - [Radio](#checkboxes-toggle-switches-and-radios)
    - [Buttons](#buttons)
- [How to](#how-to)
    - [Deal with attributes and classes](#deal-with-attributes-and-classes)
    - [Set id](#set-id)
    - [Manage label and placeholder](#manage-label-and-placeholder)
    - [Handle floating label displaying](#handle-floating-label-displaying)
    - [Set addons](#set-addons)
    - [Bind data](#bind-data)
    - [Set custom value](#set-custom-value)
    - [Handle validation statuses and errors](#handle-validation-statuses-and-errors)
    - [Add captions](#add-captions)
    - [Activate multilingual mode](#activate-multilingual-mode)
- [Testing](#testing)
- [Changelog](#changelog)
- [Contributing](#contributing)
- [Credits](#credits)
- [Licence](#license)

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

[](#installation)

You can install the package via composer:

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

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

[](#configuration)

You can publish the config file with:

```
php artisan vendor:publish --tag=form-components:config
```

Among its configurations, this package allows you to choose which UI framework will be use.

Please note that you'll have to install and configure the UI framework you want to use before using this package.

Views
-----

[](#views)

You can publish the package views to customize them if necessary:

```
php artisan vendor:publish --tag=form-components:views
```

Components
----------

[](#components)

### Form

[](#form)

Components can be wrapped into a form component.

If no custom method is set, a `GET` method will be set by default.

Hidden CSRF and spoofing method fields will be automatically generated when needed, according to the defined form method :

- You won't need to define a `@method()` directive, declare your `PUT`, `PATCH` or `DELETE` action directly in the `action` attribute
- You won't need to define a `@csrf()` directive, it will be automatically declared with `POST`, `PUT`, `PATCH` and `DELETE` actions

Forms are generated with a default `novalidate` HTML attribute, which is preventing browser validation in favor of a server-side validation (which is a good practice for security matters).

```

    ...

```

### Input and Textarea

[](#input-and-textarea)

Add inputs and textarea into your forms.

If you don't set a custom type to an input, it will take a default `text` type.

Radio, checkbox and button inputs must be used with their own components because of their different behaviour.

Textarea component can be used the same way as an input component but without declaring a type.

```

...

```

### Select

[](#select)

Set select components in your forms.

Auto generate options by providing an associative value/label array.

HTML select elements natively don't accept placeholder attributes, however the select component allows you to handle a placeholder-like option is prepended to the other ones. This placeholder will behave [as for the other components](#manage-label-and-placeholder).

By default, this select placeholder option is selected, disabled and hidden. However, you'll be able to allow it to be selected in case you need to set a `nullable` field for example. To do that, just add the `allowPlaceholderToBeSelected` attribute to your component.

In multiple mode, this package will take care about converting the name into an array name, so you don't have to add it manually.

```
@php($options = [1 => 'Laravel', 2 => 'Bootstrap', 3 => 'Tailwind'])

 {{-- You'll be able to selected the placeholder and the name will be converted to hobbies[] --}}
```

### Checkboxes, Toggle switches and Radios

[](#checkboxes-toggle-switches-and-radios)

Checkbox, toggle switch and radio components are available for you to use.

Because radio inputs are never used alone, you'll have to declare a required `group` attribute when using them, awaiting a value/label associative array from which the radio fields will be generated.

Regarding checkbox and toggle switch inputs, you will be able to use them in single or in group mode. To use them in group mode, you'll have to declare a `group` attribute too.

In group mode, this package will take care about converting the name into an array name, so you don't have to add it manually.

If you want to display these input components inline, just define an `inline` attribute.

```
 {{-- 1 generated checkbox --}}
 {{-- 2 generated checkboxes --}}
 {{-- 1 generated toggle switch with inline mode --}}
 'Livewire']" :checked="livewire"/> {{-- 2 generated toggle switches --}}
 {{-- 2 generated radios with inline mode --}}
```

### Buttons

[](#buttons)

Submit and link button components are available.

Submit button allows you to trigger a form and will provide a default `__('Submit')` body if none is defined.

Link button allows you to set actions like `Back` or `Cancel` in your forms by providing a link with a button-like display. As this component is an HTML link, it will provide a default title by analysing its body.

By default, both components will set a base background color if no custom class attribute is defined.

```

    ...

        Submit this form {{-- Will provide `btn-primary` class with Bootstrap UI --}}
         {{-- Will auto-generate `title="Back"` --}}

            Back

```

How to
------

[](#how-to)

### Deal with attributes and classes

[](#deal-with-attributes-and-classes)

Provided component are built using [Blade components](https://laravel.com/docs/blade#components).

Following how Blade components work, you can set any HTML attributes and classes:

- Attributes will replace default ones
- Classes will be merged to existing ones

Set id
------

[](#set-id)

Define components ids as you would do for any HTML element.

If no custom id is set, an id will be generated using the kebab cased `-` values.

```
 {{-- Default id: `input-first-name` --}}

 {{-- Default id: `textarea-first-name` --}}
```

### Enable or disable inputs margin bottom

[](#enable-or-disable-inputs-margin-bottom)

By default, all input components will declare a bottom margin in order to correctly position themselves in a form.

You'll sometimes need to disable this default bottom margin: you'll can do this by setting the `marginBottom` attribute to `false`.

```
 {{-- Will declare a bottom margin --}}

 {{-- Will not declare any bottom margin --}}
```

### Manage label and placeholder

[](#manage-label-and-placeholder)

You can define labels on all input components (except for [Radio](#checkbox-switch-and-radio)).

If no custom label is defined, labels will take the `__('validation.attributes.)` default value.

Following the same behaviour, all input components that are allowing the use of a `placeholder` ([Select](#select) included) will provide a default placeholder that will take the `label` value.

You can override this default value by setting a custom placeholder.

You also can hide auto-generated label and placeholder by them to `false`.

```
 {{-- Will display the custom label and placeholder --}}
 {{-- Will hide the label and placeholder --}}
 {{-- Will display default auto-generated label and placeholder --}}
```

### Handle floating label displaying

[](#handle-floating-label-displaying)

This package allows you to enable or disable floating labels displaying.

You can set the global floating label behaviour with `config('form-components.floating_label')` config.

You will be able to override this global behaviour at form level for all contained components.

```

     {{-- Will display a floating label even if it has been disabled in config --}}

```

Finally, you'll also can override all other defined behaviour on components themselves.

```

```

### Set addons

[](#set-addons)

You can define `prepend` and `append` HTML addons on input and textarea components.

```

```

Note: you may use HTML directly instead of components for complex addon's management.

### Bind data

[](#bind-data)

You can bind Eloquent Models, objects, collections or arrays in order to autofill bound components values.

Binding data on the form component will trigger the binding of all of its contained components.

You can bind data directly on a component and override the form binding.

In case of validation error, components will be repopulated by old values that will override bound values.

For specific use case, you also can use the `@bind($boundDataBatch)` and the `@endbind` Blade directives to bind a group of components.

```
@php
    $dataBatch1 = ['description' => 'A wonderful description'];
    $dataBatch2 = ['first_name' => 'John', 'last_name' => 'Bonham'];
@endphp

     {{-- Will set the value from `$user->email` --}}
     {{-- Will set the value from `$dataBatch1['description`] --}}
    @bind($dataBatch2)
         {{-- Will set the value from `$dataBatch2['first_name`] --}}
         {{-- Will set the value from `$dataBatch2['last_name`] --}}
    @endbind

```

### Set custom value

[](#set-custom-value)

Data binding can be overridden by setting custom values on components.

```
@php($data = ['description' => 'A wonderful description'];)

    ...
     {{-- Will set the value from `$data['description`] --}}

```

### Handle validation statuses and errors

[](#handle-validation-statuses-and-errors)

Components will be able to display or hide their success/error statuses and error message when a validation error is triggered:

- If the validation success displaying is activated, components will only be marked as valid when other components in the form are detected as invalid
- If the validation failure displaying is activated, components in error will be marked as invalid and will display their related error message

You can control this behaviour at different levels:

- Define the global default behaviour with `config('form-components.display_validation_success')` and `config('form-components.display_validation_failure')`
- Customize this behaviour on a form and apply it locally for all its contained components
- Set a specific behaviour directly on a component

```

     {{-- Disabled success/error statuses and error message --}}
     {{-- Enabled success/error statuses and error message --}}

```

You also can customize the error bag that should be used to determine components success/error statuses and error messages on form components.

```
 {{-- Error bag for all components within the form --}}
    @errorbag('group_error_bag') {{-- Error bag for a group of components --}}

    @enderrorbag
     {{-- Error bag for a specific component --}}
    ...

```

### Add captions

[](#add-captions)

Help users and display additional instructions under you components by adding captions.

```

```

### Activate multilingual mode

[](#activate-multilingual-mode)

Activate multilingual mode on `input` and `textarea` components to benefit from the following features:

- Component duplication: one component per locale will be displayed
- Name localization: `name="description"` will be transformed into `name="description[]"`
- Default label and error message localization: `__(validation.attributes.name)` translation used to generate default label and error message will be appended with `()`

```

```

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

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

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

[](#contributing)

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

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Arthur LORENT](https://github.com/Okipa)
- [Pojow](https://github.com/pojow)
- [All Contributors](../../contributors)

License
-------

[](#license)

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

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance45

Moderate activity, may be stable

Popularity11

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 82.4% 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 ~91 days

Total

4

Last Release

429d ago

Major Versions

v0.1.1 → v1.0.02024-06-08

PHP version history (2 changes)v0.1.0PHP 8.1.\*|8.2.\*|8.3.\*

v1.0.1PHP 8.1.\*|8.2.\*|8.3.\*|8.4.\*

### Community

Maintainers

![](https://www.gravatar.com/avatar/9ee5a76f5a08b08cf00597b5a4a24ea82e3f69b9d50be178136f3251a990745d?d=identicon)[pojow](/maintainers/pojow)

---

Top Contributors

[![Okipa](https://avatars.githubusercontent.com/u/5328934?v=4)](https://github.com/Okipa "Okipa (28 commits)")[![VultyDev](https://avatars.githubusercontent.com/u/98212056?v=4)](https://github.com/VultyDev "VultyDev (3 commits)")[![Balsakup](https://avatars.githubusercontent.com/u/5208282?v=4)](https://github.com/Balsakup "Balsakup (2 commits)")[![pojow](https://avatars.githubusercontent.com/u/172031140?v=4)](https://github.com/pojow "pojow (1 commits)")

---

Tags

phplaravelpackagecomponentsgeneratorhtmlformgenerationgeneratelaravel-form-componentsokipaPojow

###  Code Quality

Code StyleLaravel Pint

### Embed Badge

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

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

###  Alternatives

[okipa/laravel-form-components

Ready-to-use and customizable form components.

198.0k1](/packages/okipa-laravel-form-components)[okipa/laravel-table

Generate tables from Eloquent models.

56752.8k](/packages/okipa-laravel-table)[larastan/larastan

Larastan - Discover bugs in your code without running it. A phpstan/phpstan extension for Laravel

6.4k43.5M5.2k](/packages/larastan-larastan)[rumenx/php-sitemap

Framework-agnostic Sitemap generator for PHP, Laravel, and Symfony.

1.3k15.1k1](/packages/rumenx-php-sitemap)

PHPackages © 2026

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