PHPackages vkm-apps/x-form - 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. [Templating & Views](/categories/templating) 4. / 5. vkm-apps/x-form ActiveLibrary[Templating & Views](/categories/templating) vkm-apps/x-form =============== Reusable Laravel Blade Form Components using Livewire & AlpineJS. v1.1.5(3mo ago)042MITBladePHP ^8.1 Since Jun 11Pushed 3mo agoCompare [ Source](https://github.com/vkm-apps/x-form)[ Packagist](https://packagist.org/packages/vkm-apps/x-form)[ RSS](/packages/vkm-apps-x-form/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (1)Versions (37)Used By (0) VKM APPS | X-Form ================= [](#vkm-apps--x-form) #### ✨ Speed up your form building! [](#-speed-up-your-form-building) You can now create forms in just one line using Blade components β€” no more repeating yourself! πŸš€πŸ’» X-Form is a fully customized package of Blade components for **Laravel 10+**, built with **Livewire 3+**, **Tailwind CSS 4**, and **AlpineJS 3**. It simplifies the creation of dynamic, interactive forms while keeping them fully customizable. To enjoy full compatibility use along with AlpineJS plugins: Installation ------------ [](#installation) Install X-Form and via Composer: ``` composer require vkm-apps/x-form ``` Publish the configuration files: ``` php artisan vendor:publish --tag=x-form:config ``` > Once published, you can customize field layouts, icons, colors, and Tailwind classes to match your project’s design. --- Available Components -------------------- [](#available-components) X-Form provides the following Blade components: - `x-form.input` - `x-form.checkbox` - `x-form.radio` - `x-form.select` - `x-form.textarea` - `x-form.file` - `x-form.editor` - `x-form.date` - `x-form.password` - `x-form.disabled` --- Usage ----- [](#usage) All components follow a consistent syntax to bind to Livewire model properties and automatically handle labels, validation, and interactivity. ### Basic Syntax [](#basic-syntax) ``` ``` --- Input ----- [](#input) A fully customizable input field with a label, validation, and input tag by default. ``` ``` **Required field:** ``` ``` **Live updates:** ``` ``` **Custom input type:** ``` ``` **Custom label slot:** ``` Custom Title ``` --- Select ------ [](#select) Render a select dropdown with an array in the format `['value' => 'label']`. ``` ``` **Livewire component example:** ``` #[Computed] public function yourList(): array { return YourModel::pluck('option_value', 'text_title')->toArray(); } ``` > Arrays use string keys to preserve frontend ordering. --- Editor ------ [](#editor) > Requires @vkm-js/editor & @vkm-js/dropdown alpine plugins The Editor component provides a rich content editor with all the essential tools for writing, editing, and styling text. It supports advanced formatting and can optionally integrate a file manager for uploading and selecting media files. - Add the with-filemanager attribute to enable file management. - By default, uploaded files are stored on the media disk. You can change this in the x-form.php configuration file. Example usage: ``` ``` This will render a fully-featured editor for the html.en property with file manager support enabled. --- Checkboxes and Radio Buttons ---------------------------- [](#checkboxes-and-radio-buttons) Checkboxes and radios work similarly to `x-form.select`, using an array for options. ``` ``` **Horizontal layout:** ``` ``` --- Grouped Checkboxes ------------------ [](#grouped-checkboxes) Grouped checkboxes support **tooltips** and **toggle actions per group**. - `label` β†’ Main group label - `title` β†’ Key name for each subgroup - `toggle="functionName"` β†’ Function to handle group toggle (e.g., select all) - `tooltip-key` β†’ Field in the array to show tooltip **Example array:** ``` $countries = [ 'europe' => [ ['id' => 'gr', 'title' => 'Greece', 'description' => 'Greece, officially the Hellenic Republic...'], ['id' => 'it', 'title' => 'Italy', 'description' => 'Italy is a country in Mediterranean sea...'], ], ]; ``` **Example toggle function:** ``` public function yourFunction($groupKeyNameOrID) { // $groupKeyNameOrID is 'europe' } ``` **Grouped checkbox Blade example:** ``` ``` --- Disabled Inputs --------------- [](#disabled-inputs) Use `x-form.disabled` to display non-editable content. You can include copy buttons or other actions without writing additional JS. ``` Content here is read-only but can be copied. ``` > The Copy functionality is powered by AlpineJS by default. ### Health Score 41 β€” FairBetter than 89% of packages Maintenance81 Actively maintained with recent releases Popularity9 Limited adoption so far Community6 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~6 days Recently: every ~13 days Total 36 Last Release 102d ago Major Versions v0.0.6 β†’ v1.0.12025-07-29 ### Community Maintainers ![](https://www.gravatar.com/avatar/cd1cc3519b88df6f45c1768a7f88bcc95dbf82c4891d47ffbb3f2f11f0587fbe?d=identicon)[vmphobos](/maintainers/vmphobos) --- Top Contributors [![vkm-apps](https://avatars.githubusercontent.com/u/139857686?v=4)](https://github.com/vkm-apps "vkm-apps (57 commits)") --- Tags alpinejsbladeblade-componentsformslaravellaravel12livewirelivewire3laravelcomponentsbladelivewirealpinejshtml formsform layouts ### Embed Badge ![Health badge](/badges/vkm-apps-x-form/health.svg) ``` [![Health](https://phpackages.com/badges/vkm-apps-x-form/health.svg)](https://phpackages.com/packages/vkm-apps-x-form) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[victorybiz/laravel-simple-select Laravel Simple Select inputs component for Blade and Livewire. 13721.1k](/packages/victorybiz-laravel-simple-select)[developermithu/tallcraftui TallCraftUI is a Laravel blade UI components library built on TALL stack 1672.4k](/packages/developermithu-tallcraftui)[mati365/ckeditor5-livewire CKEditor 5 integration for Laravel Livewire 413.9k](/packages/mati365-ckeditor5-livewire)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.3k1](/packages/electrik-slate) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)