{"id":13423000,"url":"https://github.com/protonemedia/laravel-form-components","last_synced_at":"2025-09-30T15:31:10.448Z","repository":{"id":38307764,"uuid":"279708006","full_name":"protonemedia/laravel-form-components","owner":"protonemedia","description":"A set of Blade components to rapidly build forms with Tailwind CSS (v1.0 and v2.0) and Bootstrap 4/5. Supports validation, model binding, default values, translations, Laravel Livewire, includes default vendor styling and fully customizable!","archived":true,"fork":false,"pushed_at":"2024-01-25T12:14:18.000Z","size":282,"stargazers_count":816,"open_issues_count":26,"forks_count":108,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-09-26T09:10:54.094Z","etag":null,"topics":["bootstrap","bootstrap-4","bootstrap4","bootstrap5","laravel","laravel-framework","laravel-package","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://protone.media/blog/laravel-form-components-to-rapidly-build-forms-with-tailwind-css-and-bootstrap-4","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/protonemedia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["pascalbaljet"]}},"created_at":"2020-07-14T22:42:04.000Z","updated_at":"2025-09-22T18:55:52.000Z","dependencies_parsed_at":"2024-01-02T12:29:55.896Z","dependency_job_id":"a16b94c8-9894-4296-9c2d-1ac466614dc7","html_url":"https://github.com/protonemedia/laravel-form-components","commit_stats":{"total_commits":107,"total_committers":9,"mean_commits":11.88888888888889,"dds":"0.31775700934579443","last_synced_commit":"d4bf426a7ce6c0789b6dc895e5192ccbfe0e1393"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/protonemedia/laravel-form-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protonemedia%2Flaravel-form-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protonemedia%2Flaravel-form-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protonemedia%2Flaravel-form-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protonemedia%2Flaravel-form-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/protonemedia","download_url":"https://codeload.github.com/protonemedia/laravel-form-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protonemedia%2Flaravel-form-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277712300,"owners_count":25864336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-30T02:00:09.208Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-4","bootstrap4","bootstrap5","laravel","laravel-framework","laravel-package","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-30T23:01:05.118Z","updated_at":"2025-09-30T15:31:10.146Z","avatar_url":"https://github.com/protonemedia.png","language":"PHP","funding_links":["https://github.com/sponsors/pascalbaljet"],"categories":["Forms","Packages / Plugins","PHP"],"sub_categories":[],"readme":"\u003e :warning: This package is deprecated. It doesn't support Livewire 3 and Tailwind 3 and won't be maintained anymore.\n\n# Laravel Form Components\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/protonemedia/laravel-form-components.svg?style=flat-square)](https://packagist.org/packages/protonemedia/laravel-form-components)\n[![Build Status](https://img.shields.io/travis/protonemedia/laravel-form-components/master.svg?style=flat-square)](https://travis-ci.org/protonemedia/laravel-form-components)\n[![Total Downloads](https://img.shields.io/packagist/dt/protonemedia/laravel-form-components.svg?style=flat-square)](https://packagist.org/packages/protonemedia/laravel-form-components)\n[![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen)](https://plant.treeware.earth/protonemedia/laravel-form-components)\n\nA 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), [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) and [Bootstrap 5](https://getbootstrap.com/docs/5.1/forms/overview/). Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!\n\n## Sponsor this package!\n\n❤️ We proudly support the community by developing Laravel packages and giving them away for free. If this package saves you time or if you're relying on it professionally, please consider [sponsoring the maintenance and development](https://github.com/sponsors/pascalbaljet). Keeping track of issues and pull requests takes time, but we're happy to help!\n\n## Laravel Splade\n\n**Did you hear about Laravel Splade? 🤩**\n\nIt's the *magic* of Inertia.js with the *simplicity* of Blade. [Splade](https://github.com/protonemedia/laravel-splade) provides a super easy way to build Single Page Applications using Blade templates. Besides that magic SPA-feeling, it comes with more than ten components to sparkle your app and make it interactive, all without ever leaving Blade.\n\n## Features\n\n### 📺 Want to see this package in action? Join the live stream on November 19 at 14:00 CET: [https://youtu.be/7eNZS4U7xyM](https://youtu.be/7eNZS4U7xyM)\n\n* Components for input, textarea, select, multi-select, checkbox and radio elements.\n* Support for Tailwind v1 with [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app).\n* Support for Tailwind v2 with [Tailwind Forms](https://tailwindcss-forms.vercel.app/).\n* Support for [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.6/components/forms/).\n* Support for [Bootstrap 5 Forms](https://getbootstrap.com/docs/5.1/forms/overview/).\n* Component logic independent from Blade views, the Tailwind and Bootstrap views use the same logic.\n* Bind a target to a form (or a set of elements) to provide default values (model binding).\n* Support for [Laravel Livewire](https://laravel-livewire.com) v2.\n* Support for Spatie's [laravel-translatable](https://github.com/spatie/laravel-translatable).\n* Re-populate forms with [old input](https://laravel.com/docs/master/requests#old-input).\n* Validation errors.\n* [Form method spoofing](https://laravel.com/docs/master/routing#form-method-spoofing).\n* Components classes and Blade views fully customizable.\n* Support for prefixing the components.\n\n## Requirements\n\n* PHP 8.0 or higher\n* Laravel 9.0\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require protonemedia/laravel-form-components\n```\n\nIf 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.\n\n## Quick example\n\n```blade\n\u003cx-form\u003e\n    @bind($user)\n        \u003cx-form-input name=\"last_name\" label=\"Last Name\" /\u003e\n        \u003cx-form-select name=\"country_code\" :options=\"$options\" /\u003e\n        \u003cx-form-select name=\"interests[]\" :options=\"$multiOptions\" label=\"Select your interests\" multiple /\u003e\n\n        \u003c!-- \\Spatie\\Translatable\\HasTranslations --\u003e\n        \u003cx-form-textarea name=\"biography\" language=\"nl\" placeholder=\"Dutch Biography\" /\u003e\n        \u003cx-form-textarea name=\"biography\" language=\"en\" placeholder=\"English Biography\" /\u003e\n\n        \u003c!-- Inline radio inputs --\u003e\n        \u003cx-form-group name=\"newsletter_frequency\" label=\"Newsletter frequency\" inline\u003e\n            \u003cx-form-radio name=\"newsletter_frequency\" value=\"daily\" label=\"Daily\" /\u003e\n            \u003cx-form-radio name=\"newsletter_frequency\" value=\"weekly\" label=\"Weekly\" /\u003e\n        \u003c/x-form-group\u003e\n\n        \u003cx-form-group\u003e\n            \u003cx-form-checkbox name=\"subscribe_to_newsletter\" label=\"Subscribe to newsletter\" /\u003e\n            \u003cx-form-checkbox name=\"agree_terms\" label=\"Agree with terms\" /\u003e\n        \u003c/x-form-group\u003e\n\n        \u003cx-form-submit /\u003e\n    @endbind\n\u003c/x-form\u003e\n```\n\n\u003cimg src=\"https://github.com/protonemedia/laravel-form-components/blob/master/quick-example-form.png?raw=true\" width=\"450\"  alt=\"Quick example form\"/\u003e\n\n## Preface\n\nAt first sight, generating HTML forms with PHP looks great. PHP's power can make it less repetitive, and it's nice to resolve input values and validation states right from your PHP code. Still, it gets harder to keep your PHP code clean and neat whenever your forms get more complex. Often you end up with lots of custom code, writing extensions, and overriding defaults, just for the sake of adding some small thing to your form.\n\nAfter years of trying all sorts of form builders, it feels like just writing most of the form in HTML is the most versatile solution. You can add helper texts, icons, tooltips, popovers, custom sections, and JavaScript integrations however and wherever you like. The power of [Laravel Blade Components](https://laravel.com/docs/8.x/blade) allows us to add all kinds of features without bringing the whole form-building process into PHP.\n\nLet'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. Likewise, PHP expressions and variables can be passed to attributes using the `:` prefix. Do you need Alpine.js or VueJS directives? No problem!\n\n```blade\n\u003cx-form action=\"/api/user\"\u003e\n    \u003c!-- ... --\u003e\n\u003c/x-form\u003e\n```\n\n```blade\n\u003cx-form :action=\"route('api.user.store')\" v-on:submit=\"checkForm\"\u003e\n    \u003c!-- ... --\u003e\n\u003c/x-form\u003e\n```\n\n## Configuration\n\nYou can switch frameworks by updating the `framework` setting in the `form-components.php` configuration file. Check out the [customization section](#customize-the-blade-views) on publishing the configuration and view files. If you're using the [Livewire Stack with Laravel Jetstream](https://jetstream.laravel.com/2.x/stacks/livewire.html), you probably want to set the `framework` configuration key to `tailwind-forms-simple`.\n\n```php\nreturn [\n    'framework' =\u003e 'bootstrap-4',\n];\n```\n\nNo further configuration is needed unless you want to [customize the Blade views and components](#customize-the-blade-views).\n\n## Usage\n\n### Input and textarea elements\n\nThe minimum requirement for an `input` or `textarea` is the `name` attribute.\n\n```blade\n\u003cx-form-input name=\"company_name\" /\u003e\n```\n\nOptionally you can add a `label` attribute, which can be computed as well.\n\n```blade\n\u003cx-form-input name=\"company_name\" label=\"Company name\" /\u003e\n\u003cx-form-input name=\"company_name\" :label=\"trans('forms.company_name')\" /\u003e\n```\n\nYou can also choose to use a `placeholder` instead of a label, and of course you can change the `type` of the element.\n\n```blade\n\u003cx-form-input type=\"email\" name=\"current_email\" placeholder=\"Current email address\" /\u003e\n```\n\nBy default, every element shows validation errors, but you can hide them if you want.\n\n```blade\n\u003cx-form-textarea name=\"description\" :show-errors=\"false\" /\u003e\n```\n\n### Default value and binds\n\nYou can use the `default` attribute to specify the default value of the element.\n\n```blade\n\u003cx-form-textarea name=\"motivation\" default=\"I want to use this package because...\" /\u003e\n```\n\n#### Binding a target\n\nInstead 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`.\n\n```blade\n\u003cx-form-textarea name=\"description\" :bind=\"$video\" /\u003e\n```\n\nIn the example above, where `$video` is an Eloquent model, the default value will be `$video-\u003edescription`.\n\n#### Date Casting\n\nIf you use Eloquent's [Date Casting](https://laravel.com/docs/8.x/eloquent-mutators#date-casting) feature, you can use the date attributes in your forms by setting the `use_eloquent_date_casting` configuration key to `true`. For compatibility reasons, this is disabled by default.\n\n```php\nreturn [\n    'use_eloquent_date_casting' =\u003e true,\n];\n```\n\nYou can either use the `dates` property or the `casts` property in your Eloquent model to specify date attributes:\n\n```php\nclass ActivityModel extends Model\n{\n    public $dates = ['finished_at'];\n\n    public $casts = [\n        'started_at'   =\u003e 'date',\n        'failed_at'    =\u003e 'datetime',\n        'completed_at' =\u003e 'date:d-m-Y',\n        'skipped_at'   =\u003e 'datetime:Y-m-d H:i',\n    ];\n}\n```\n\n```blade\n\u003cx-form-input name=\"completed_at\" :bind=\"$activity\" /\u003e\n```\n\nIn the example above, the default value will be formatted like `31-10-2021`.\n\n#### Binding a target to multiple elements\n\nYou can also bind a target by using the `@bind` directive. This will bind the target to all elements until the `@endbind` directive.\n\n```blade\n\u003cx-form\u003e\n    @bind($video)\n        \u003cx-form-input name=\"title\" label=\"Title\" /\u003e\n        \u003cx-form-textarea name=\"description\" label=\"Description\" /\u003e\n    @endbind\n\u003c/x-form\u003e\n```\n\nYou can even mix targets!\n\n```blade\n\u003cx-form\u003e\n    @bind($user)\n        \u003cx-form-input name=\"full_name\" label=\"Full name\" /\u003e\n\n        @bind($userProfile)\n            \u003cx-form-textarea name=\"biography\" label=\"Biography\" /\u003e\n        @endbind\n\n        \u003cx-form-input name=\"email\" label=\"Email address\" /\u003e\n    @endbind\n\u003c/x-form\u003e\n```\n\n#### Override or remove a binding\n\nYou 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`.\n\n```blade\n\u003cx-form\u003e\n    @bind($video)\n        \u003cx-form-input name=\"title\" label=\"Title\" /\u003e\n        \u003cx-form-input :bind=\"$videoDetails\" name=\"subtitle\" label=\"Subtitle\" /\u003e\n        \u003cx-form-textarea :bind=\"false\" name=\"description\" label=\"Description\" /\u003e\n    @endbind\n\u003c/x-form\u003e\n```\n\n#### Laravel Livewire\n\nYou 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.\n\n```php\nuse Livewire\\Component;\n\nclass ContactForm extends Component\n{\n    public $name;\n    public $email;\n\n    public function submit()\n    {\n        $this-\u003evalidate([\n            'name' =\u003e 'required|min:6',\n            'email' =\u003e 'required|email',\n        ]);\n\n        Contact::create([\n            'name' =\u003e $this-\u003ename,\n            'email' =\u003e $this-\u003eemail,\n        ]);\n    }\n\n    public function render()\n    {\n        return view('livewire.contact-form');\n    }\n}\n```\n\nNormally 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 add the `wire:model` attribute.\n\n```blade\n\u003cx-form wire:submit.prevent=\"submit\"\u003e\n    @wire\n        \u003cx-form-input name=\"name\" /\u003e\n        \u003cx-form-input name=\"email\" /\u003e\n    @endwire\n\n    \u003cx-form-submit\u003eSave Contact\u003c/x-form-submit\u003e\n\u003c/x-form\u003e\n```\n\nAdditionally, 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.\n\n```blade\n\u003cx-form wire:submit.prevent=\"submit\"\u003e\n    @wire('debounce.500ms')\n        \u003cx-form-input name=\"email\" /\u003e\n    @endwire\n\u003c/x-form\u003e\n```\n\nIt's also possible to use the `wire:model` attribute by default. You may set the `default_wire` configuration setting to `true` or a modifier like `debounce.500ms`. This way, you don't need the `@wire` and `@endwire` directives in your views. You may still override the default setting by using the `@wire` directive, or by manually adding the `wire:model` attribute to a form element.\n\n### Select elements\n\nBesides the `name` attribute, the `select` element has a required `options` attribute, which should be a simple *key-value* array.\n\n```php\n$countries = [\n    'be' =\u003e 'Belgium',\n    'nl' =\u003e 'The Netherlands',\n];\n```\n\n```blade\n\u003cx-form-select name=\"country_code\" :options=\"$countries\" /\u003e\n```\n\nYou can provide a *slot* to the `select` element as well:\n\n```blade\n\u003cx-form-select name=\"country_code\"\u003e\n   \u003coption value=\"be\"\u003eBelgium\u003c/option\u003e\n   \u003coption value=\"nl\"\u003eThe Netherlands\u003c/option\u003e\n\u003c/x-form-select\u003e\n```\n\nIf 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.\n\n```blade\n\u003cx-form-select name=\"country_code[]\" :options=\"$countries\" multiple :default=\"['be', 'nl']\" /\u003e\n```\n\nYou may add a `placeholder` attribute to the select element. This will prepend a disabled option.\n\nThis feature was added in v3.2.0. If you're upgrading from a previous version *and* you published the Blade views, you should republish them *or* update them manually.\n\n```blade\n\u003cx-form-select name=\"country_code\" placeholder=\"Choose...\" /\u003e\n```\n\nRendered HTML:\n\n```html\n\u003cselect\u003e\n    \u003coption value=\"\" disabled\u003eChoose...\u003c/option\u003e\n    \u003c!-- other options... --\u003e\n\u003c/select\u003e\n```\n\n#### Using Eloquent relationships\n\nThis 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.\n\nIn 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.\n\n```blade\n\u003cx-form\u003e\n    @bind($video)\n        \u003cx-form-select name=\"tags[]\" :options=\"$tags\" multiple many-relation /\u003e\n    @endbind\n\u003c/x-form\u003e\n```\n\n### Checkbox elements\n\nCheckboxes have a default value of `1`, but you can customize it as well.\n\n```blade\n\u003cx-form-checkbox name=\"subscribe_to_newsletter\" label=\"Subscribe to newsletter\" /\u003e\n```\n\nIf 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`.\n\n```blade\n\u003cx-form-group name=\"interests\" label=\"Pick one or more interests\"\u003e\n    \u003cx-form-checkbox name=\"interests[]\" :show-errors=\"false\" value=\"laravel\" label=\"Laravel\" /\u003e\n    \u003cx-form-checkbox name=\"interests[]\" :show-errors=\"false\" value=\"tailwindcss\" label=\"Tailwind CSS\" /\u003e\n\u003c/x-form-group\u003e\n```\n\n### Radio elements\n\nRadio 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`.\n\nYou can group checkbox and radio elements on the same horizontal row by adding an `inline` attribute to the `form-group` element.\n\n```blade\n\u003cx-form-group name=\"notification_channel\" label=\"How do you want to receive your notifications?\" inline\u003e\n    \u003cx-form-radio name=\"notification_channel\" value=\"mail\" label=\"Mail\" /\u003e\n    \u003cx-form-radio name=\"notification_channel\" value=\"slack\" label=\"Slack\" /\u003e\n\u003c/x-form-group\u003e\n```\n\nWhen you're not using target binding, you can use the `default` attribute to mark a radio element as checked:\n\n\n```blade\n\u003cx-form-group name=\"notification_channel\" label=\"How do you want to receive your notifications?\"\u003e\n    \u003cx-form-radio name=\"notification_channel\" value=\"mail\" label=\"Mail\" default /\u003e\n    \u003cx-form-radio name=\"notification_channel\" value=\"slack\" label=\"Slack\" /\u003e\n\u003c/x-form-group\u003e\n```\n\n### Old input data\n\nWhen 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.\n\n### Handling translations\n\nThis package supports `spatie/laravel-translatable` out of the box. You can add a `language` attribute to your element.\n\n```blade\n\u003cx-form-input name=\"title\" language=\"en\" :bind=\"$book\" /\u003e\n```\n\nThis will result in the following HTML:\n\n```html\n\u003cinput name=\"title[en]\" value=\"Laravel: Up \u0026 Running\" /\u003e\n```\n\nTo 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.\n\n### Customize the blade views\n\nPublish the configuration file and Blade views with the following command:\n\n```bash\nphp artisan vendor:publish --provider=\"ProtoneMedia\\LaravelFormComponents\\Support\\ServiceProvider\"\n```\n\nYou 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.\n\n#### Component logic\n\nYou 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.\n\n### Prefix the components\n\nYou can define a prefix in the `form-components.php` configuration file.\n\n```php\nreturn [\n    'prefix' =\u003e 'tailwind',\n];\n```\n\nNow all components can be referenced like so:\n\n```blade\n\u003cx-tailwind-form\u003e\n    \u003cx-tailwind-form-input name=\"company_name\" /\u003e\n\u003c/x-tailwind-form\u003e\n```\n\n### Error messages\n\nBy 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`.\n\n```blade\n\u003cx-form\u003e\n    \u003cx-form-input name=\"company_name\" :show-errors=\"false\" /\u003e\n\n    \u003c!-- other elements --\u003e\n\n    \u003cx-form-errors name=\"company_name\" /\u003e\n\n    \u003cx-form-errors name=\"company_name\" bag=\"register\" /\u003e\n\u003c/x-form\u003e\n```\n\n### Submit button\n\nThe label defaults to *Submit*, but you can use the slot to provide your own content.\n\n```blade\n\u003cx-form-submit\u003e\n    \u003cspan class=\"text-green-500\"\u003eSend\u003c/span\u003e\n\u003c/x-form-submit\u003e\n```\n\n### Bootstrap\n\nYou can switch to [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) or [Bootstrap 5](https://getbootstrap.com/docs/5.0/forms/overview/) by updating the `framework` setting in the `form-components.php` configuration file.\n\n```php\nreturn [\n    'framework' =\u003e 'bootstrap-5',\n];\n```\n\nThere is a little 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.\n\nBootstrap 5 changes a lot regarding forms. If you migrate from 4 to 5, make sure to read the migration logs about [forms](https://getbootstrap.com/docs/5.0/migration/#forms).\n\n#### Input group / prepend and append\n\nIn addition to the Tailwind features, with Bootstrap 4, there is also support for [input groups](https://getbootstrap.com/docs/4.6/components/forms/). Use the `prepend` and `append` slots to provide the contents.\n\n```blade\n\u003cx-form-input name=\"username\" label=\"Username\"\u003e\n    @slot('prepend')\n        \u003cspan\u003e@\u003c/span\u003e\n    @endslot\n\u003c/x-form-input\u003e\n\n\u003cx-form-input name=\"subdomain\" label=\"Subdomain\"\u003e\n    @slot('append')\n        \u003cspan\u003e.protone.media\u003c/span\u003e\n    @endslot\n\u003c/x-form-input\u003e\n```\n\nWith Bootstrap 5, the [input groups](https://getbootstrap.com/docs/5.0/forms/input-group/) have been simplified. You can add as many items as you would like in any order you would like. Use the `form-input-group-text` component to add text or [checkboxes](https://getbootstrap.com/docs/5.0/forms/input-group/#checkboxes-and-radios).\n\n```blade\n\u003cx-form-input-group label=\"Profile\" \u003e\n    \u003cx-form-input name=\"name\" placeholder=\"Name\" id=\"name\" /\u003e\n    \u003cx-form-input-group-text\u003e@\u003c/x-form-input-group-text\u003e\n    \u003cx-form-input name=\"nickname\" placeholder=\"Nickname\" id=\"nickname\" /\u003e\n    \u003cx-form-submit /\u003e\n\u003c/x-form-input-group\u003e\n```\n\n#### Floating labels\n\nAs of Bootstrap 5, you can add [floating labels](https://getbootstrap.com/docs/5.0/forms/floating-labels/) by adding the `floating` attribute to inputs, selects (excluding `multiple`), and textareas.\n\n```blade\n\u003cx-form-input label=\"Floating Label\" name=\"float_me\" id=\"float_me\" floating /\u003e\n```\n\n#### Help text\n\nYou can add [block-level help text](https://getbootstrap.com/docs/4.6/components/forms/#help-text) to any element by using the `help` slot.\n\n```blade\n\u003cx-form-input name=\"username\" label=\"Username\"\u003e\n    @slot('help')\n        \u003csmall class=\"form-text text-muted\"\u003e\n            Your username must be 8-20 characters long.\n        \u003c/small\u003e\n    @endslot\n\u003c/x-form-input\u003e\n```\n\n### Testing\n\n``` bash\ncomposer test\n```\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information about what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Other Laravel packages\n\n* [`Laravel Analytics Event Tracking`](https://github.com/protonemedia/laravel-analytics-event-tracking): Laravel package to easily send events to Google Analytics.\n* [`Laravel Blade On Demand`](https://github.com/protonemedia/laravel-blade-on-demand): Laravel package to compile Blade templates in memory.\n* [`Laravel Cross Eloquent Search`](https://github.com/protonemedia/laravel-cross-eloquent-search): Laravel package to search through multiple Eloquent models.\n* [`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.\n* [`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.\n* [`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.\n* [`Laravel Paddle`](https://github.com/protonemedia/laravel-paddle): Paddle.com API integration for Laravel with support for webhooks/events.\n* [`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.\n* [`Laravel WebDAV`](https://github.com/protonemedia/laravel-webdav): WebDAV driver for Laravel's Filesystem.\n\n### Security\n\nIf you discover any security related issues, please email pascal@protone.media instead of using the issue tracker.\n\n## Credits\n\n- [Pascal Baljet](https://github.com/protonemedia)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n## Treeware\n\nThis 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotonemedia%2Flaravel-form-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprotonemedia%2Flaravel-form-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotonemedia%2Flaravel-form-components/lists"}