PHPackages                             stakovicz/ux-collection - 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. stakovicz/ux-collection

ActiveSymfony-bundle[Templating & Views](/categories/templating)

stakovicz/ux-collection
=======================

UX Form Collection for Symfony Forms

0.0.4(5y ago)73173MITTwigPHP >=7.2.5

Since Apr 27Pushed 4y ago1 watchersCompare

[ Source](https://github.com/stakovicz/ux-collection)[ Packagist](https://packagist.org/packages/stakovicz/ux-collection)[ RSS](/packages/stakovicz-ux-collection/feed)WikiDiscussions main Synced today

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

UX Form Collection
==================

[](#ux-form-collection)

Symfony UX Form collection is a Symfony bundle providing light UX for collection in Symfony Forms.

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

[](#installation)

UX Form Collection requires PHP 7.2+ and Symfony 4.4+.

Install this bundle using Composer and Symfony Flex:

```
composer require stakovicz/ux-collection

# Don't forget to install the JavaScript dependencies as well and compile
yarn install --force
yarn encore dev
```

Also make sure you have at least version 2.0 of [@symfony/stimulus-bridge](https://github.com/symfony/stimulus-bridge)in your `package.json` file.

You need to select the right theme from the one you are using :

```
# config/packages/twig.yaml
twig:
  # For bootstrap for example
  form_themes: ['@FormCollection/form_theme_div.html.twig']
```

You have 2 different themes :

- `@FormCollection/form_theme_div.html.twig`
- `@FormCollection/form_theme_table.html.twig`

[Check the Symfony doc](https://symfony.com/doc/4.4/form/form_themes.html) for the different ways to set themes in Symfony.

Usage
-----

[](#usage)

The most common usage of Form Collection is to use it as a replacement of the native CollectionType class:

```
// ...
use Symfony\UX\FormCollection\Form\CollectionType;

class BlogFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            // ...
            ->add('comments', CollectionType::class, [
                // ...
                'button_add' => [
                     // Default text for the add button
                    'text' => 'Add',
                    // Default attr class for the add button
                    'attr' => ['class' => 'btn btn-outline-primary']
                ],
                'button_delete' => [
                    // Default text for the delete button
                    'text' => 'Remove',
                    // Default class for the delete button
                    'attr' => ['class' => 'btn btn-outline-secondary']
                ],
            ])
            // ...
        ;
    }

    // ...
}
```

### Extend the default behavior

[](#extend-the-default-behavior)

Symfony UX Form Collection allows you to extend its default behavior using a custom Stimulus controller:

```
// mycollection_controller.js

import { Controller } from 'stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('collection:pre-connect', this._onPreConnect);
        this.element.addEventListener('collection:connect', this._onConnect);
        this.element.addEventListener('collection:pre-add', this._onPreAdd);
        this.element.addEventListener('collection:add', this._onAdd);
        this.element.addEventListener('collection:pre-delete', this._onPreDelete);
        this.element.addEventListener('collection:delete', this._onDelete);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('collection:pre-connect', this._onPreConnect);
        this.element.removeEventListener('collection:connect', this._onConnect);
    }

    _onPreConnect(event) {
        // The collection is not yet connected
        console.log(event.detail.allowAdd);    // Access to the allow_add option of the form
        console.log(event.detail.allowDelete); // Access to the allow_delete option of the form
    }

    _onConnect(event) {
        // Same as collection:pre-connect event
    }

    _onPreAdd(event) {
        console.log(event.detail.index);   // Access to the curent index will be added
        console.log(event.detail.element); // Access to the element will be added
    }

    _onAdd(event) {
        // Same as collection:pre-add event
    }

    _onPreDelete(event) {
        console.log(event.detail.index);   // Access to the index will be removed
        console.log(event.detail.element); // Access to the elemnt will be removed
    }

    _onDelete(event) {
        // Same as collection:pre-delete event
    }
}
```

Then in your render call, add your controller as an HTML attribute:

```
        $builder
            // ...
            ->add('comments', UXCollectionType::class, [
                // ...
                'attr' => [
                    // Change the controller name
                    'data-controller' => 'mycollection'
                ]
            ]);
```

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 90.9% 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 ~0 days

Total

4

Last Release

1836d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/548493ef8226b608aac5af54d8b4401755a45b4e8d6dd30e312f24f1f77eafc0?d=identicon)[stakovicz](/maintainers/stakovicz)

---

Top Contributors

[![stakovicz](https://avatars.githubusercontent.com/u/83301974?v=4)](https://github.com/stakovicz "stakovicz (10 commits)")[![alexander-schranz](https://avatars.githubusercontent.com/u/1698337?v=4)](https://github.com/alexander-schranz "alexander-schranz (1 commits)")

---

Tags

ux-collection

### Embed Badge

![Health badge](/badges/stakovicz-ux-collection/health.svg)

```
[![Health](https://phpackages.com/badges/stakovicz-ux-collection/health.svg)](https://phpackages.com/packages/stakovicz-ux-collection)
```

###  Alternatives

[a2lix/auto-form-bundle

Automate form building

873.8M11](/packages/a2lix-auto-form-bundle)[symfony/ux-cropperjs

Cropper.js integration for Symfony

19280.3k3](/packages/symfony-ux-cropperjs)[netgen/content-browser

Netgen Content Browser is a Symfony bundle that provides an interface which selects items from any kind of backend and returns the IDs of selected items back to the calling code.

14112.1k8](/packages/netgen-content-browser)[iq2i/storia-bundle

UI Storia bundle

144.6k](/packages/iq2i-storia-bundle)

PHPackages © 2026

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