Add documenation for bootstrap 5 form template

Author: ker0x

form/bootstrap5.rst

@@ -79,31 +79,67 @@ If you prefer to apply the Bootstrap styles on a form to form basis, include the
 
 .. _reference-forms-bootstrap-error-messages:
 
-General
--------
+.. note::
 
-By default, all inputs are rendered with the ``mb-3`` class on their container.
+    By default, all inputs are rendered with the ``mb-3`` class on their container.
+    If you override the `row_attr` class option, the ``mb-3`` will be override too
+    and you will need to explicitly add it.
 
 Error Messages
 --------------
 
-Form errors are rendered **inside** the ``<label>`` element to make sure there
-is a strong connection between the error and its ``<input>``, as required by the
-`WCAG 2.0 standard`_. To achieve this, ``form_errors()`` is called by
-``form_label()`` internally. If you call to ``form_errors()`` in your template,
-you'll get the error messages displayed *twice*.
+Unlike the Bootstrap 4 template, errors are rendered **after** the ``input`` element.
+However, this still make a strong connection between the error and its ``<input>``, as
+required by the `WCAG 2.0 standard`_.
 
 Checkboxes and Radios
 ---------------------
 
 For a checkbox/radio field, calling ``form_label()`` doesn't render anything.
 Due to Bootstrap internals, the label is already rendered by ``form_widget()``.
 
+Inline Checkboxes and Radios
+----------------------------
+
+If you want to render your checkboxes or radios fields `inline`_, you can add
+the `checkbox-inline` or `radio-inline` class, depending of your Symfony Form
+type or `ChoiceType` configuration, to the label class.
+
+.. configuration-block::
+
+    .. code-block:: php
+
+        $builder
+            ->add('myCheckbox', CheckboxType::class, [
+                'label_attr' => [
+                    'class' => '`checkbox-inline',
+                ],
+            ])
+            ->add('myRadio', RadioType::class, [
+                'label_attr' => [
+                    'class' => 'radio-inline',
+                ],
+            ]);
+
+    .. code-block:: twig
+
+        {{ form_row(form.myCheckbox, {
+            label_attr: {
+                class: 'checkbox-inline'
+            }
+        }) }}
+
+        {{ form_row(form.myRadio, {
+            label_attr: {
+                class: 'radio-inline'
+            }
+        }) }}
+
 Switches
 ________
 
-Bootstrap 5 allow to render checkboxes as "`switches`_". You can enable that on your
-Symfony Form ``CheckboxType`` by adding the ``checkbox-switch`` class to the label:
+Bootstrap 5 allow to render checkboxes as "`switches`_". You can enable this feature
+on your Symfony Form ``CheckboxType`` by adding the ``checkbox-switch`` class to the label:
 
 .. configuration-block::
 
@@ -123,6 +159,54 @@ Symfony Form ``CheckboxType`` by adding the ``checkbox-switch`` class to the lab
             }
         }) }}
 
+.. tip::
+
+    You can also render your switches inline by simply adding the ``checkbox-inline`` class
+    on the ``label_attr`` option.
+
+    .. code-block:: php
+
+        ...
+        'label_attr' => [
+            'class' => '`checkbox-inline checkbox-switch',
+        ],
+        ...
+
+.. caution::
+
+    Switches only worked with **checkbox**.
+
+Input group
+___________
+
+To create `input group`_ in your Symfony Form, simply add the `input-group` class
+to the ``row_attr`` option.
+
+.. configuration-block::
+
+    .. code-block:: php
+
+        $builder->add('email', CheckboxType::class, [
+            'label' => '@',
+            'row_attr' => [
+                'class' => 'input-group',
+            ],
+        ]);
+
+    .. code-block:: twig
+
+        {{ form_row(form.email, {
+            label: '@',
+            row_attr: {
+                class: 'input-group'
+            }
+        }) }}
+
+.. caution::
+
+    If you have filled in the `help` option of your form, it will also be rendered
+    as part of the group.
+
 Floating labels
 ---------------
 
@@ -156,6 +240,11 @@ of your form type.
             }
         }) }}
 
+.. caution::
+
+    You **must** provide a ``label`` and a ``placeholder`` to make floating labels
+    works properly.
+
 Accessibility
 -------------
 
@@ -168,5 +257,7 @@ standard, but it does mean that you have come far in your work to create a desig
 for **all** users.
 
 .. _`WCAG 2.0 standard`: https://www.w3.org/TR/WCAG20/
+.. _`inline`: https://getbootstrap.com/docs/5.0/forms/checks-radios/#inline
 .. _`switches`: https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches
+.. _`input group`: https://getbootstrap.com/docs/5.0/forms/input-group/
 .. _`floating label`: https://getbootstrap.com/docs/5.0/forms/floating-labels/