Symfony + Bootstrap 4 Form Test

Rendering test of form elements (Massimo Cassandro 2016/2020).

Repository readme: https://github.com/massimo-cassandro/symfony-bootstrap-form-theme#readme

Symfony controller: /src/AppBundle/Controller/TestFormController.php
This page twig template: src/AppBundle/Resources/views/test_form/test_form.html.twig
Form template: dist/bs4_form_layout.html.twig
Scss files: dist/scss
JS files: dist/js

Note: for easier readability, in this test page, twig parameters (as required or disabled) have been added to the twig widget, even if they are tipically defined in the controller.

Basic elements

form_widget

Widget basic element (input text)

Hidden field

Note: only the field is returned, even if form_row is used

readonly fields with form-control-plaintext class

Help text

form_row required + help text

input text
Help text

form_row required + disabled + help text

input text
Help text

form_row without container

Basic form_rows elements require the .form-group container; if it is set to false, labels, help text, etc are not displayed.

Extra container classes

Extra classes can be added to the .form-group container thru the container_class option
Help text

Single checkboxes

Checkbox (input element only)

Checkbox Bootstrap default (stacked) + form-group container (default) + required

With custom id and custom label
Help text

Checkbox Bootstrap default (stacked) without container + required + disabled

Checkbox Bootstrap default (stacked) + container + required + disabled

Help text

Checkbox with label on top

Place the label above the checkbox field. This option requires the cointainer markup, therefore the container: false option is ignored. Furhermore, the top_label option can't be activated if the bs_custom_control is set to true
Help text

Single checkbox switch

See https://getbootstrap.com/docs/4.4/components/forms/#switches

Single checkboxes with custom controls

Note that checkboxes with custom controls are not fully supported with this template.
Bootsrap docs: https://getbootstrap.com/docs/4.3/components/forms/#checkboxes-and-radios-1

Checkbox stacked + custom control + required

Note that the help and params.container don't take effect, and that the required asterisk is located after the label string through the span.required element

Checkbox stacked + custom control + required + disabled

Multiple checkboxes

Checkbox series obtained thru the ChoiceType type (https://symfony.com/doc/current/reference/forms/types/choice.html)

Multiple stacked checkboxes

Controller ChoiceType options: 'expanded' => true, 'multiple' => true.
Note that the required has the unique effect to add the required class to the fieldset, to highlight that at least one of the controls must be selected. However, the final check must be performed using javascript.
The help parameter, if present, is placed at top, under the legend tag
Multiple checkboxes
Help text

Multiple stacked checkboxes without elements

An optional parameter no_items_mes (text with markup) can be added to be displayed if the Choice array is empty
Multiple checkboxes
Help text

This element is empty

Multiple stacked checkboxes + disabled

Same of previous with disabled parameter
Multiple checkboxes
Help text

Multiple stacked checkboxes without fieldset

For cases where checkboxes must be inserted in a fieldset already present in the markup. In this case, the help parameter takes no effects.

Multiple stacked checkboxes without fieldset + required + disabled

Same of previous with disabled and required parameter. Note that the required parameter takes no effect.

Multiple stacked checkboxes + multiple columns

Distributes checkboxes into responsive columns. The column parameter is an array whose keys are the bootstrap breakpoints abbreviations (sm, md, ...) and values are the number of desidered columns (max 5). This option also works with params.collection_container = false parameter
Multiple checkboxes

Multiple checkboxes + inline

Checkboxes are rendered as inline elements. This option is obviously incompatible with multiple columns
Multiple checkboxes
Help text

Multiple stacked checkboxes + custom control

Note that actually multiple checkboxes with custom controls don't fully support all the parameters like disabled, required etc...
Multiple checkboxes

Grouped stacked checkboxestodo

Still working on...

Radios

Stacked radio buttons

Same of multiple checkboxes, the unique difference if that the the controller multiple option is set to false.
All the parameter available for multiple checkboxes can be applied to radio buttons
Radio buttons
Help text

Multiselect

A way to handle multiple checkboxes or radio buttons using a dropdown panel.
It uses Bootstraps dropdowns for markup (jQuery, Popper.js, and related Bootstrap JS scripts are requested).

To activate this option add params.multiselect: true to the widget for default settings or set it as an object to define a placeholder, button_class (default: btn-multiselect, defined in _forms.scss) and menu_class (default: none) parameters according to Bootstrap docs.

TODO: css for sizing classes

Standard multiSelect

Basic dropdown with checkboxes
Multiselect

Multiselect with columns

Basic dropdown with radio buttons arranged in columns and custom options
Multiselect

Select

Standard select field

Note that select fields have the params.bs_custom_control option set to true by default. This option adds the custom-select class to to select element. To avoid this behavior, you must explicitly set the bs_custom_control option to false.
Help text

Select field with optgroup

Select with grouped options and bs_custom_control = false. This setting essentially affects rendering with Firefox and Safari, while it doesn't generate big differences on Chrome and Edge (Blink). Note that we don't have an empty option at the the top, since the placeholder option (in the controller) is set to false
Help text

Select field with optgroup and multiple attribute

Help text

Input groups

Options to add text, buttons, or button groups on either side of textual inputs, selects, or file inputs. See http://getbootstrap.com/docs/4.4/components/input-group/#input-group.
This option does not include all the options of variations of the Boostrap input group, but it allows to easily manage the most common cases.

The before and after parameters allow you to define the position of the addon. Each of them may have more items.

Use the type: text option to add simple text add-ons (a span.input-group-text tag will be added), or type: markup for more complex and customizable elements.

If before and after are strings, the add-on is considered to be a single type: text element,
if they are arrays of strings, each sub-element is considered to be a type: text element.

Finally, if they are arrays of objects, each element is treated according to its type option.

Text input group

Input field with text before and after
$
.00
Help text

Select input group

Select field with text and button at the end
Some text
Help text

Other elements

Textarea

Help text

Range

TODO: current value label, step labels

Help text

File

Help text