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.

v2.0.2(1mo ago)048MITBladePHP ^8.1

Since Jun 11Pushed 1mo 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 (3)Versions (40)Used By (0)

VKM APPS | X-Form
=================

[](#vkm-apps--x-form)

[![Latest Version on Packagist](https://camo.githubusercontent.com/0b89ca4c28c98a57cd72fe08cff0b3b3f3c2fcd3d45627d15d547f6a9903e8ab/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f766b6d2d617070732f782d666f726d2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vkm-apps/x-form)[![Total Downloads](https://camo.githubusercontent.com/4dbd79657dd5e88588685c721c1609f1baf311b23c41d8210831942ad180fa2f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f766b6d2d617070732f782d666f726d2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vkm-apps/x-form)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE)

#### ✨ Supercharge your Laravel form building!

[](#-supercharge-your-laravel-form-building)

Create beautiful, fully interactive forms in a single line of Blade code. No more repeating boilerplate layouts, validation classes, error handlers, and input styles! 🚀💻

**X-Form** is a highly polished collection of Blade components for **Laravel 11, 12, and 13+**, built on top of **Livewire 3**, **Tailwind CSS 4**, and **AlpineJS 3**. It makes form creation lightning-fast and fully interactive while ensuring complete customization via published configurations.

To enjoy full compatibility, please install the VKM JS plugins bundle: 👉

---

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

[](#requirements)

- **PHP**: `^8.1`
- **Laravel / Support**: `^11.0 | ^12.0 | ^13.0`
- **Livewire**: `^3.0`
- **AlpineJS**: `^3.0`
- **Tailwind CSS**: `^4.0`

---

Installation & Setup
------------------------

[](#installation--setup)

Install the package via Composer:

```
composer require vkm-apps/x-form
```

Install and publish the configuration files using the setup command:

```
php artisan x-form:install
```

Note

The install command automatically publishes the package configuration file to `config/x-form.php`. You can customize styles, Tailwind classes, default icons, and other behavioral settings.

---

Available Components
--------------------

[](#available-components)

Here is a summary of the available Blade components and their key features:

Component TagCore PurposeSpecial Features[``](#input)Standard text/number inputsPrepend/append slots, live validation, group sizing, tooltips/popovers[``](#textarea)Multiline text inputAuto-resizing heights, character countdown counter, limit restriction[``](#password)Password entryInteractive visibility toggle (eye/eye-off icon)[``](#select-and-dropdown)Select dropdownsRich searchable dropdowns, inline search, native select fallback[``](#checkboxes-and-radio-buttons)CheckboxesSingle/grouped layouts, nested modules with tooltip and group toggles[``](#checkboxes-and-radio-buttons)Radio buttonsConsistent styling, horizontal/vertical layouts[``](#date-picker)Native date pickerRange date pickers, multi-locale, Livewire & plain HTML form bindings[``](#disabled-inputs)Rich read-only displaysInline actions (Copy, Link, Mail, Phone, Fax, Maps), currency formatting[``](#money-input)Locale-aware currency inputsDynamic AlpineJS masking, automatic locale/currency formatting, raw float bindings, dynamic placeholders[``](#rich-text-editor)Rich text WYSIWYG editorFormatting, colors, tables, YouTube embeds, custom image editor[``](#rich-text-editor)Singleton table managerRenders the shared table management modal[``](#file-upload)File uploaderFile previews, drag-and-drop dropzones, multiple file support[``](#file-url-browser)File-URL selectorIntegrated file manager popup to insert public file URLs directly[``](#icon-helper)SVG icon utilityLightweight helper to render predefined system icons---

Global Features & Shared Attributes
---------------------------------------

[](#global-features--shared-attributes)

All components inheriting from the core `FormElement` support a set of rich, interactive features that make writing beautiful, accessible interfaces straightforward:

### 1. Tooltips & Help Popovers

[](#1-tooltips--help-popovers)

Add quick informational tips next to your labels automatically.

- `tooltip="Your message"`: Shows a small info icon next to the label that displays a tooltip on hover.
- `help="Your rich HTML message"`: Shows an info icon that opens an AlpineJS popover dialog on click.

```

```

### 2. Required Markings

[](#2-required-markings)

- `required`: Adds a red asterisk (`*`) to the label automatically.

```

```

### 3. Prepend & Append Slots

[](#3-prepend--append-slots)

Enables nesting icons, buttons, text badges, or custom HTML inside the input layout.

- ``: Inserts content before the input field.
- ``: Inserts content after the input field.

```

    $
    USD

```

### 4. Livewire Model Modifiers

[](#4-livewire-model-modifiers)

Binds model updates utilizing Livewire modifiers out of the box:

- `live`: Updates the model on every keypress (`wire:model.live`).
- `blur`: Updates the model when input focus is lost (`wire:model.live.blur`).
- `change`: Updates the model when input selection changes (`wire:model.live.change`).

```

```

---

Input
-----

[](#input)

A fully customizable input field with automated label generation, validation highlights, accessibility attributes, and error message outputs.

```

```

### Component Properties

[](#component-properties)

AttributeTypeDefaultDescription`model``string|null``null`The Livewire model property to bind to.`name``string|null``null`Name attribute (defaults to `model`).`label``string|null``null`Text label display.`type``string``'text'`HTML input type (`number`, `email`, `tel`, `url`, `text`, etc.).`placeholder``string|null``null`Input placeholder text.`icon``string|null``null`Icon CSS classes (e.g. FontAwesome) displayed next to the label.`required``bool``false`Marks the field as required (red asterisk).`tooltip``string|null``null`Tooltip info text.`help``string|null``null`Rich HTML help popover content.`group``string|bool``false`Flex sizing wrapper. Values: `'sm'`, `'lg'`, `'xl'`, or `false`.`validate``string|bool``false`Client-side validation trigger. Values: `'blur'`, `true` (keyup), or `false`.`border``bool``true`Show input border.`invalid``bool``false`Manually force the input to show validation error styling.```
{{-- Large, instantly validating number input --}}

```

---

Textarea
--------

[](#textarea)

Textareas support character counts, maximum limits, auto-height resizing, and error bindings.

```

```

### Component Properties

[](#component-properties-1)

AttributeTypeDefaultDescription`model``string|null``null`The Livewire model property to bind to.`name``string|null``null`Name attribute.`label``string|null``null`Text label display.`rows``int``5`Height size in rows.`limit``int``0`Character limit. If `> 0`, turns count display into remaining counter.`showCount``bool``true`Show/hide the character counter underneath.`icon``string|null``null`Icon classes beside the label.`required``bool``false`Marks the field as required.`tooltip``string|null``null`Tooltip text.`help``string|null``null`Help popover content.```
{{-- Textarea with a 250-character limit counter --}}

```

---

Password
--------

[](#password)

A secure password input that automatically renders a show/hide toggle button (eye icon) using AlpineJS under the hood.

```

```

### Component Properties

[](#component-properties-2)

AttributeTypeDefaultDescription`model``string|null``null`The Livewire model property to bind to.`name``string|null``null`Name attribute.`label``string|null``null`Text label display.`icon``string|null``null`Icon classes next to the label.`required``bool``false`Marks the field as required.`tooltip``string|null``null`Tooltip text.`help``string|null``null`Help popover content.`group``string|null``null`Sized wrapper. Supported values: `'sm'`, `'lg'`, `'xl'`, or `null`.`validate``string|bool``false`Real-time validation trigger (`'blur'`, `true`, or `false`).---

Select and Dropdown
-------------------

[](#select-and-dropdown)

Renders an interactive dropdown with custom searching, styled scrollbars, and dynamic state bindings. Alternatively, it can fall back to a native browser select element.

```

```

### Component Properties

[](#component-properties-3)

AttributeTypeDefaultDescription`list``array|null``['yes'=>1,'no'=>0]`Options mapping array (formatted as `Label => Value` or `Title => ID`).`model``string|null``null`The Livewire model property to bind to.`name``string|null``null`Name attribute.`label``string|null``null`Text label display.`title``string``'-'`Default display placeholder text (e.g. "Select an option").`icon``string|null``null`Prepend HTML or CSS class icon inside the select button.`searchable``bool``false`Enable/disable text filter search within the list.`inline``bool``false`Place the search input inline inside the popup instead of overlaying the select button.`dropdown``bool``true`Renders a styled custom dropdown. Set to `false` to fallback to native ``.`minWidth``string``'revert-layer'`Set dropdown container minimum width (e.g. `'250px'`).`maxHeight``string``'400px'`Set dropdown container maximum height (e.g. `'300px'`).`required``bool``false`Marks the field as required.`tooltip``string|null``null`Tooltip text.`help``string|null``null`Help popover content.`live``bool``false`Force live updates immediately upon item selection.### Options Array Format

[](#options-array-format)

Ensure arrays use string keys to preserve ordering on the frontend:

```
#[Computed]
public function countryList(): array
{
    return [
        'Greece' => 'gr',
        'Italy' => 'it',
        'Spain' => 'es',
    ];
}
```

### Advanced Select Usage

[](#advanced-select-usage)

```
{{-- Custom searchable dropdown with inline input --}}

{{-- Native browser select fallback --}}

```

---

Checkboxes and Radio Buttons
----------------------------

[](#checkboxes-and-radio-buttons)

Tailwind-styled choice groups supporting horizontal/vertical alignments, descriptions, tooltips, and interactive group toggles.

### Single Checkbox (Boolean)

[](#single-checkbox-boolean)

If you omit the `:list` attribute, the component renders a single checkbox representing a boolean value (e.g., binds to a boolean property `true`/`false`). The label is displayed inline next to the checkbox.

```

```

### Flat Checkbox Group

[](#flat-checkbox-group)

If you pass the `:list` attribute, the component renders a list of checkboxes matching the option keys and values. The label is displayed as a header above the list.

```

```

### Radio Group

[](#radio-group)

```

```

### Component Properties (Checkbox & Radio)

[](#component-properties-checkbox--radio)

AttributeTypeDefaultDescription`list``array|null``null`Options array (`Title => Value`). If null, renders a single boolean checkbox.`model``string|null``null`Livewire model binding.`name``string|null``null`Name attribute.`label``string|null``null`Label text.`horizontal``bool``false`Render list horizontally. (Vertical stack is the default).`required``bool``false`Marks the field as required.`tooltip``string|null``null`Tooltip icon and message text.`help``string|null``null`Help popover icon and HTML content.**Checkbox Only**`grouped``bool``false`Enables nested category groups (requires multi-dimensional list).`group``bool``false`Alias for `grouped`.`perColumn``int``20`Columns chunk sizes.`toggle``string|null``null`Livewire method called when category header checkbox is clicked (bypasses default AlpineJS toggle).`tooltipKey``string|null``null`Array key used for items tooltips when `grouped` is true.```
{{-- Horizontal row alignment for Radios --}}

```

---

### Grouped Checkboxes (With Header Checkboxes & Tooltips)

[](#grouped-checkboxes-with-header-checkboxes--tooltips)

Grouped checkboxes are designed for complex nested layouts (e.g., system permissions categorized by module) and support dynamic **tooltips** and **automatic header toggles**.

You can use either:

```

```

or the `group` attribute alias:

```

```

**Header Checkbox Select-All**: Each category header features a functional checkbox. Checking/unchecking the header checkbox toggles all items in that category client-side via AlpineJS. In addition, checking all individual items in a category automatically checks the header checkbox.

**Example Array Structure:**

```
$countries = [
    'Europe' => [
        ['id' => 'gr', 'title' => 'Greece', 'description' => 'Greece is located in southeastern Europe.'],
        ['id' => 'it', 'title' => 'Italy', 'description' => 'Italy is a peninsula in the Mediterranean Sea.'],
    ],
    'Asia' => [
        ['id' => 'jp', 'title' => 'Japan', 'description' => 'Japan is an island country in East Asia.'],
    ],
];
```

**Custom Livewire Toggle Function (Optional):**If you want to run backend PHP code when a group header is clicked, pass the `toggle` attribute with your Livewire method name:

```
public function toggleGroup($groupName)
{
    // $groupName is passed as 'Europe' or 'Asia'
    // Custom select-all or deselect-all logic here...
}
```

```

```

---

Date Picker
-----------

[](#date-picker)

A powerful, native-feeling calendar date input wrapper that uses the AlpineJS date picker extension. It supports ranges, locales, and handles both Livewire property binding and normal HTML form submissions.

### Component Properties

[](#component-properties-4)

AttributeTypeDefaultDescription`model``string|null``null`Livewire model property.`name``string|null``null`Name attribute.`label``string|null``null`Text label display.`range``bool``false`Enable range picker (displays side-by-side start and end inputs).`locale``string``'en'`Locale language code (e.g. `'el'`, `'es'`, `'de'`).`required``bool``false`Marks field as required.`icon``string|null``null`Custom icon beside label.`tooltip``string|null``null`Tooltip info text.`help``string|null``null`Help popover content.### Single Date Picker

[](#single-date-picker)

```

```

### Date Range Picker

[](#date-range-picker)

When `range` is enabled, the component displays two side-by-side inputs for selecting start and end boundaries.

```

```

### Locales Support

[](#locales-support)

Pass language codes to initialize localized date displays:

```

```

### Native HTML Form Mode

[](#native-html-form-mode)

If the `model` attribute is omitted, the date picker works as a plain form input writing to a hidden field for standard PHP POST requests.

- **Single date mode:** Submits to the input `name` parameter.
- **Range date mode:** Submits to `[name]_start` and `[name]_end` (e.g., if `name="travel_dates"`, POST fields will be `travel_dates_start` and `travel_dates_end`).

```
{{-- Submits birth_date --}}

{{-- Submits hotel_dates_start and hotel_dates_end --}}

```

---

Disabled Inputs
---------------

[](#disabled-inputs)

The `x-form.disabled` component displays non-editable content in a clean, consistent format. It is equipped with quick-action wrapper tags that support instant interactivity without writing extra Javascript.

```

```

### Component Properties

[](#component-properties-5)

AttributeTypeDefaultDescription`label``string|null``null`Text label display.`value``string|null``null`Value string to display.`icon``string|null``null`Icon classes or custom SVG string overlay.`currency``string|null``null`Currency symbol formatting based on code (e.g., `'USD'`, `'EUR'`).`copy``bool``false`Adds a copy-to-clipboard button with instant feedback.`link``bool``false`Renders the value as a clickable link that opens in a new tab.`mail``bool``false`Renders a `mailto:` link to open the default email client.`phone``bool``false`Renders a `tel:` link for direct call features.`fax``bool``false`Renders a `fax:` link.`map``bool``false`Renders a link that opens Google Maps with the address value preloaded.`tooltip``string|null``null`Tooltip info text.### Advanced Usage Examples

[](#advanced-usage-examples)

**Display Currency Formatting:**Prepend locale-aware currency symbols dynamically resolved from the ISO code.

```

```

**Custom Icon Overlay:**

```

```

**Prepend & Append Slots:**

```

    [Verified]

```

---

Money Input
-----------

[](#money-input)

A locale-aware, highly polished money input component built with AlpineJS masking (`x-mask:dynamic`). It formats user input dynamically with correct thousands and decimal separators based on locale and currency settings, while sending and maintaining a raw numeric float value to Livewire or traditional form submissions.

```

```

### Key Features

[](#key-features)

1. **Automatic Locale & Currency Resolution**: Using PHP's `NumberFormatter` class, the component automatically resolves the decimal separator, thousands separator, currency symbol, symbol position (prefix vs. suffix), and default precision.
2. **Dynamic Placeholders**: If no explicit `placeholder` is provided, the component dynamically generates a formatted placeholder representing the currency format (e.g. `1,000.00` for `en-US` / `USD`, or `1.000,00` for `de-DE` / `EUR`).
3. **Dual Bindings**: A visible, styled text input handles the masked presentation using AlpineJS, while a hidden input stores the raw, unformatted float value (`rawValue`) for clean database storing and Livewire updates.
4. **Livewire & Plain HTML Form Support**: Integrates seamlessly with Livewire's binding modifiers (`live`, `blur`, `change`) and supports traditional form submissions using the `name` attribute.

### Component Properties

[](#component-properties-6)

AttributeTypeDefaultDescription`model``string|null``null`The Livewire model property to bind to.`name``string|null``null`Name attribute for traditional forms (defaults to `model`).`label``string|null``null`Text label display.`placeholder``string|null``null`Custom input placeholder. Defaults to a dynamically generated placeholder (e.g., `1,000.00`) based on resolved settings.`currency``string|null``null`ISO 3-letter currency code (e.g. `'USD'`, `'EUR'`, `'GBP'`). Falls back to `config('x-form.currency')`.`locale``string|null``null`Locale tag (e.g. `'en_US'`, `'el_GR'`, `'de_DE'`, `'en'`) or language (`'en'`, `'de'`, etc.). Falls back to application locale.`precision``int``2`Number of decimal places. Falls back to currency's default precision resolved via `NumberFormatter`.`icon``string|null``null`Icon classes next to the label.`required``bool``false`Marks the field as required (red asterisk).`tooltip``string|null``null`Tooltip info text.`help``string|null``null`Rich HTML help popover content.`group``string|bool``false`Sizing wrapper. Supported values: `'sm'`, `'lg'`, `'xl'`, or `false`.`validate``string|bool``false`Client-side validation trigger. Supported values: `'blur'`, `true` (keyup), or `false`.`border``bool``true`Show input border.`invalid``bool``false`Force the input to display validation error styling.### Advanced Examples

[](#advanced-examples)

**Custom Currency & Locale:**Explicitly define a different currency and locale. The input automatically positions the symbol (prefix or suffix) and formats numbers correctly.

```
{{-- German locale with Euro (symbol € placed as suffix, e.g. 1.000,00) --}}

{{-- US locale with GBP (symbol £ placed as prefix, e.g. £1,000.00) --}}

```

**Custom Decimal Precision:**You can specify custom decimal precision (e.g., for commodities, exchange rates, or precision pricing).

```

```

---

Rich Text Editor
----------------

[](#rich-text-editor)

An HTML WYSIWYG editor containing formatting tools, custom text and highlight colors, table structures, and links. It also has features for YouTube embeds, image sizing, and Livewire File Manager integrations.

```

```

### Component Properties

[](#component-properties-7)

AttributeTypeDefaultDescription`model``string|null``null`Livewire model property to bind to.`label``string|null``null`Text label display.`content``string|null``null`Initial HTML content.`watchFor``string|null``null`Tracked variable (e.g. record ID) to force reactive HTML updates when records switch.`withFilemanager``bool``false`Enable Livewire File Manager button for inserting media URLs.Important

**Singleton Table Editor Requirement**To use the rich text editor's custom table builder, you must render the shared editor modal singleton once in your application's layout file (usually right before the closing `` tag):

```

```

### Reactive Array Updates

[](#reactive-array-updates)

If you are updating dynamic models and arrays inside Livewire and need the text editor's HTML to stay reactive without breaking input focus, pass the identifier of the tracked array inside the `watchFor` property:

```

```

---

File Upload
-----------

[](#file-upload)

Allows users to upload files via standard buttons or high-fidelity, drag-and-drop dropzones.

```

```

### Component Properties

[](#component-properties-8)

AttributeTypeDefaultDescription`model``string|null``null`Livewire model binding.`name``string|null``null`Name attribute.`label``string|null``null`Header label.`button``string|null``null`Custom button text (e.g. `'Choose File...'`).`multiple``string|bool|null``null`Enable multiple file uploads. Set to `true` or `'multiple'`.`dropzone``bool``false`Enable drag-and-drop upload zone layout.`help``string|null``null`Information text (usually displayed in dropzone or below button).`required``bool``false`Marks field as required.`tooltip``string|null``null`Tooltip info text.### Dropzone Uploader

[](#dropzone-uploader)

Adds a dashed drag-and-drop zone that supports drop events and file list displays.

```

```

---

File URL Browser
----------------

[](#file-url-browser)

The `x-form.file-url` component combines a standard input field with the package's Livewire File Manager. Clicking the input allows the user to browse files inside their storage disk and attaches the selected file's public URL directly back to the text input.

```

```

### Component Properties

[](#component-properties-9)

AttributeTypeDefaultDescription`model``string|null``null`The Livewire model property to bind to.`label``string|null``null`Text label display.`placeholder``string|null``null`Input placeholder text.`required``bool``false`Marks field as required.`tooltip``string|null``null`Tooltip info text.`help``string|null``null`Help popover content.`validate``string|bool``false`Real-time validation trigger (`'blur'`, `true`, or `false`).`border``bool``true`Show input border.---

Icon Helper
-----------

[](#icon-helper)

A lightweight, centralized Blade component that renders vector SVGs from the package's default icon directory. This avoids duplicating inline SVG codes throughout layouts.

```

```

### Component Properties

[](#component-properties-10)

AttributeTypeDefaultDescription`name``string`*(Required)*Predefined icon name key.`class``string``'size-5'`Custom CSS classes applied to the SVG tag.### Predefined Icon Names

[](#predefined-icon-names)

The following keys are supported out-of-the-box:

`paragraph`, `headings`, `textcase`, `fontsize`, `bold`, `italic`, `underline`, `strikethrough`, `superscript`, `subscript`, `code`, `textcolor`, `backgroundcolor`, `alignment`, `alignleft`, `aligncenter`, `alignright`, `ul`, `ol`, `letter_list`, `table`, `link`, `video`, `image`, `cleanup`, `chevron-up`, `chevron-down`, `chevron-left`, `chevron-right`, `settings`, `trash`.

---

Customization
-------------

[](#customization)

### Publishing Component Views

[](#publishing-component-views)

If you need to tweak the HTML architecture of the inputs directly, publish the view files to your application directory:

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

The view files will be copied to `resources/views/vendor/x-form/`, allowing you to modify them without losing package update capabilities.

### Custom Styling in `config/x-form.php`

[](#custom-styling-in-configx-formphp)

The styling is completely driven by configuration values. You can change global background behaviors, focus states, sizes, and borders:

```
'inputs' => [
    'bg'      => 'bg-black/5 dark:bg-white/5 backdrop-blur-md shadow-xs',
    'border'  => 'border border-black/5 dark:border-white/10',
    'focus'   => 'focus:ring-2 focus:ring-blue-500/50 dark:focus:ring-blue-400/50 focus:shadow-md outline-none',
],
```

---

License
-------

[](#license)

This package is open-sourced software licensed under the [MIT license](LICENSE).

###  Health Score

45

—

FairBetter than 91% of packages

Maintenance94

Actively maintained with recent releases

Popularity10

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity58

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 ~9 days

Recently: every ~30 days

Total

39

Last Release

32d ago

Major Versions

v0.0.6 → v1.0.12025-07-29

v1.1.5 → v2.0.02026-05-23

### 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 (60 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.5k570.6k22](/packages/robsontenorio-mary)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5443.8k](/packages/hasinhayder-tyro-dashboard)[victorybiz/laravel-simple-select

Laravel Simple Select inputs component for Blade and Livewire.

13722.5k](/packages/victorybiz-laravel-simple-select)[technikermathe/blade-lucide-icons

A package to easily make use of Lucide icons in your Laravel Blade views.

18421.4k11](/packages/technikermathe-blade-lucide-icons)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

447.9k](/packages/mati365-ckeditor5-livewire)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1663.3k](/packages/developermithu-tallcraftui)

PHPackages © 2026

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