WIP: Add usage docs

Author: 1ed

src/LiveComponent/src/Resources/doc/index.rst

@@ -1220,6 +1220,91 @@ When the user clicks ``removeComment()``, a similar process happens.
     attribute above the ``Post.comments`` property. These help new
     items save and deletes any items whose embedded forms are removed.
 
+Using LiveCollectionType
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. versionadded:: 2.3
+
+    The ``LiveCollectionType`` was added in LiveComponent 2.3.
+
+
+Symfony's `LiveCollectionType`_ can be used to embed a collection of
+embedded forms including allowing the user to dynamically add or remove
+them. Live components can accomplish make this all possible while
+writing zero JavaScript.
+
+For example, imagine a "Blog Post" form with an embedded "Comment" forms
+via the ``LiveCollectionType``::
+
+    namespace App\Form;
+
+    use Symfony\Component\Form\AbstractType;
+    use Symfony\Component\Form\FormBuilderInterface;
+    use Symfony\Component\OptionsResolver\OptionsResolver;
+    use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType;
+    use App\Entity\BlogPost;
+
+    class BlogPostFormType extends AbstractType
+    {
+        public function buildForm(FormBuilderInterface $builder, array $options)
+        {
+            $builder
+                ->add('title', TextType::class)
+                // ...
+                ->add('comments', LiveCollectionType::class, [
+                    'entry_type' => CommentFormType::class,
+                    'allow_add' => true,
+                    'allow_delete' => true,
+                    'by_reference' => false,
+                ])
+            ;
+        }
+
+        public function configureOptions(OptionsResolver $resolver)
+        {
+            $resolver->setDefaults(['data_class' => BlogPost::class]);
+        }
+    }
+
+Now, create a Twig component to render the form::
+
+    namespace App\Twig;
+
+    use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+    use Symfony\Component\Form\FormInterface;
+    use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+    use Symfony\UX\LiveComponent\Attribute\LiveAction;
+    use Symfony\UX\LiveComponent\ComponentWithFormTrait;
+    use Symfony\UX\LiveComponent\DefaultActionTrait;
+    use App\Entity\BlogPost;
+    use App\Entity\Comment;
+    use App\Form\BlogPostFormType;
+
+    #[AsLiveComponent('blog_post_collection_type')]
+    class BlogPostCollectionTypeComponent extends AbstractController
+    {
+        use LiveCollectionTrait;
+        use DefaultActionTrait;
+
+        #[LiveProp]
+        public BlogPost $post;
+
+        protected function instantiateForm(): FormInterface
+        {
+            return $this->createForm(BlogPostFormType::class, $this->post);
+        }
+    }
+
+The template for this component has two jobs: (1) render the form
+like normal and (2) include links that trigger the ``addComment()``
+and ``removeComment()`` actions:
+
+.. code-block:: twig
+
+    <div {{ attributes }} data-action="change->live#update">
+        {{ form(form) }}
+    </div>
+
 Modifying Embedded Properties with the "exposed" Option
 -------------------------------------------------------