GitHub

Symfony + Bootstrap 5 Form Test

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

Note that some examples have not been updated to the BS5 theme.

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

Form template: dist/bs5_form_layout.html.twig

Back to index

TODO list.

Basic elementstoplink

form_widgettoplink

Widget basic element (input text)
{{ form_widget(form.xxxx) }}
Twig
<input type="text" id="form_text1"
  name="form[text1]"
  class="form-control">
Markup

Hidden fieldtoplink

Note: only the field is returned, even if form_row is used
{{ form_row(form.xxxx) }}
Twig
<input type="hidden" id="form_hidden1"
  name="form[hidden1]">
Markup

readonly fields with form-control-plaintext classtoplink

Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "form label",
  "required": true,
  "attr": {
    "class": "form-control-plaintext",
    "readonly": true
  }
}) }}
Twig
<div class="form-group required">
  <label for="form_text_readonly"
    class="form-label">
    form label
  </label>
  <input type="text"
    id="form_text_readonly"
    name="form[text_readonly]"
    required="required"
    value="Some values"
    class="form-control-plaintext"
    readonly="readonly"
    aria-described-by="help-text-form_text_readonly">
  <div class="form-help-text"
    id="help-text-form_text_readonly">
    Help text
  </div>
</div>
Markup

form_row required + help texttoplink

input text
Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "form label",
  "required": true,
  "attr": {
    "placeholder": "Placeholder text"
  }
}) }}
Twig
<div class="form-group required">
  <label for="form_text2"
    class="form-label">
    form label
  </label>
  <input type="text" id="form_text2"
    name="form[text2]"
    required="required"
    placeholder="Placeholder text"
    class="form-control"
    aria-described-by="help-text-form_text2">
  <div class="form-help-text"
    id="help-text-form_text2">
    Help text
  </div>
</div>
Markup

form_row with html labeltoplink

input text
Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "form label with <em>some</em> <span class=\"text-danger\">html</span>",
  "required": true,
  "attr": {
    "placeholder": "Placeholder text"
  },
  "params": {
    "raw_label": true
  }
}) }}
Twig
<div class="form-group required">
  <label for="form_text_raw_label"
    class="form-label">
    form label with
    <em>
      some
    </em>

    <span class="text-danger">
      html
    </span>

  </label>
  <input type="text"
    id="form_text_raw_label"
    name="form[text_raw_label]"
    required="required"
    placeholder="Placeholder text"
    class="form-control"
    aria-described-by="help-text-form_text_raw_label">
  <div class="form-help-text"
    id="help-text-form_text_raw_label">
    Help text
  </div>
</div>
Markup

form_row required + disabled + help texttoplink

input text
Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "form label",
  "disabled": true,
  "required": true,
  "attr": {
    "placeholder": "Placeholder text"
  }
}) }}
Twig
<div
  class="form-group disabled required">
  <label for="form_text3"
    class="form-label">
    form label
  </label>
  <input type="text" id="form_text3"
    name="form[text3]"
    disabled="disabled"
    required="required"
    value="Some values"
    placeholder="Placeholder text"
    class="form-control"
    aria-described-by="help-text-form_text3">
  <div class="form-help-text"
    id="help-text-form_text3">
    Help text
  </div>
</div>
Markup

form_row without containertoplink

Basic form_rows elements require the .form-group container; if it is set to false, labels, help text, etc are not displayed.
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "form label",
  "required": true,
  "attr": {
    "placeholder": "Placeholder text"
  },
  "params": {
    "container": false
  }
}) }}
Twig
<input type="text" id="form_text4"
  name="form[text4]" required="required"
  placeholder="Placeholder text"
  class="form-control"
  aria-described-by="help-text-form_text4">
Markup

Extra container classestoplink

Extra classes can be added to the .form-group container thru the container_attr option
Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "form label",
  "required": true,
  "attr": {
    "placeholder": "Placeholder text"
  },
  "params": {
    "container_attr": {
      "class": "bg-dark text-white p-2 rounded"
    }
  }
}) }}
Twig
<div
  class="bg-dark text-white p-2 rounded form-group required">
  <label for="form_text5"
    class="form-label">
    form label
  </label>
  <input type="text" id="form_text5"
    name="form[text5]"
    required="required"
    placeholder="Placeholder text"
    class="form-control"
    aria-described-by="help-text-form_text5">
  <div class="form-help-text"
    id="help-text-form_text5">
    Help text
  </div>
</div>
Markup

Single checkboxestoplink

Checkbox (input element only)toplink

{{ form_widget(form.xxxx) }}
Twig
<input type="checkbox" id="form_cbox1"
  name="form[cbox1]" value="1">
Markup

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

With custom id and custom label
Help text
{{ form_row(form.xxxx, {
  "id": "custom-id",
  "help": "Help text",
  "label": "Checkbox label",
  "required": true
}) }}
Twig
<div class="form-group required">

  <div class="form-check required">
    <input type="checkbox"
      id="custom-id" name="form[cbox2]"
      required="required"
      class="form-check-input"
      aria-described-by="help-text-custom-id"
      value="1">
    <label for="custom-id"
      class="form-label">
      Checkbox label
    </label>
  </div>

  <div class="form-help-text"
    id="help-text-custom-id">
    Help text
  </div>
</div>
Markup

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

{{ form_row(form.xxxx, {
  "help": "Help text",
  "required": true,
  "disabled": true,
  "params": {
    "container": false
  }
}) }}
Twig
<div
  class="form-check disabled required">
  <input type="checkbox" id="form_cbox3"
    name="form[cbox3]"
    disabled="disabled"
    required="required"
    class="form-check-input"
    aria-described-by="help-text-form_cbox3"
    value="1">
  <label for="form_cbox3"
    class="form-label">
    Cbox3
  </label>
</div>
Markup

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

Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "required": true,
  "disabled": true
}) }}
Twig
<div
  class="form-group disabled required">

  <div
    class="form-check disabled required">
    <input type="checkbox"
      id="form_cbox5" name="form[cbox5]"
      disabled="disabled"
      required="required"
      class="form-check-input"
      aria-described-by="help-text-form_cbox5"
      value="1">
    <label for="form_cbox5"
      class="form-label">
      Cbox5
    </label>
  </div>

  <div class="form-help-text"
    id="help-text-form_cbox5">
    Help text
  </div>
</div>
Markup

Checkbox with label on toptoplink

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
{{ form_row(form.xxxx, {
  "required": true,
  "help": "Help text",
  "params": {
    "container": false,
    "top_label": true
  }
}) }}
Twig
<div class="form-group required">

  <label for="form_cbox7"
    class="form-label">
    Cbox7
  </label>
  <input type="checkbox" id="form_cbox7"
    name="form[cbox7]"
    required="required" class="d-block"
    aria-described-by="help-text-form_cbox7"
    value="1">

  <div class="form-help-text"
    id="help-text-form_cbox7">
    Help text
  </div>
</div>
Markup

Single checkbox switchtoplink

See https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches
Help text
{{ form_row(form.xxxx, {
  "required": true,
  "help": "Help text",
  "params": {
    "container": true,
    "switch": true
  }
}) }}
Twig
<div
  class="custom-control custom-switch">
  <input type="checkbox" id="form_cbox8"
    name="form[cbox8]"
    required="required"
    class="custom-control-input"
    aria-described-by="help-text-form_cbox8"
    value="1">
  <label
    class="custom-control-label form-label"
    for="form_cbox8">
    Cbox8
  </label>
</div>
<div class="form-help-text"
  id="help-text-form_cbox8">
  Help text
</div>
Markup

Single checkboxes with custom controlstoplink

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

Checkbox stacked + custom control + requiredtoplink

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
{{ form_row(form.xxxx, {
  "help": "Help text",
  "required": true,
  "params": {
    "container": true,
    "bs_custom_control": true
  }
}) }}
Twig
<div
  class="custom-control custom-checkbox">
  <input type="checkbox" id="form_cbox4"
    name="form[cbox4]"
    required="required"
    class="custom-control-input"
    aria-described-by="help-text-form_cbox4"
    value="1">
  <label
    class="custom-control-label form-label"
    for="form_cbox4">
    Cbox4
  </label>

  <span class="required">
  </span>

</div>
Markup

Checkbox stacked + custom control + required + disabledtoplink

{{ form_row(form.xxxx, {
  "required": true,
  "disabled": true,
  "params": {
    "bs_custom_control": true
  }
}) }}
Twig
<div
  class="custom-control custom-checkbox">
  <input type="checkbox" id="form_cbox6"
    name="form[cbox6]"
    disabled="disabled"
    required="required"
    class="custom-control-input"
    value="1">
  <label
    class="custom-control-label disabled form-label"
    for="form_cbox6">
    Cbox6
  </label>

  <span class="required">
  </span>

</div>
Markup

Multiple checkboxestoplink

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

Multiple stacked checkboxestoplink

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
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "Multiple checkboxes",
  "required": true
}) }}
Twig
<fieldset class="form-group required">
  <legend>
    Multiple checkboxes
  </legend>
  <div class="form-help-text"
    id="help-text-form_multiCbox1">
    Help text
  </div>

  <div class="form-collection"
    aria-described-by="help-text-form_multiCbox1">

    <div class="form-check">
      <input type="checkbox"
        id="form_multiCbox1_0"
        name="form[multiCbox1][]"
        class="form-check-input"
        value="1">
      <label for="form_multiCbox1_0"
        class="form-label">
        Option 1
      </label>
    </div>

    <!--Other .form-check nodes-->

  </div>
</fieldset>
Markup

Multiple stacked checkboxes without elementstoplink

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

{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "Multiple checkboxes",
  "required": false,
  "params": {
    "no_items_mes": "<p class=\"font-italic small text-muted\">This element is empty</p>"
  }
}) }}
Twig
<fieldset class="form-group">
  <legend>
    Multiple checkboxes
  </legend>
  <div class="form-help-text"
    id="help-text-form_multiCboxNoItems">
    Help text
  </div>

  <div class="form-collection"
    aria-described-by="help-text-form_multiCboxNoItems">
    <p
      class="font-italic small text-muted">
      This element is empty
    </p>
  </div>
</fieldset>
Markup

Multiple stacked checkboxes + disabledtoplink

Same of previous with disabled parameter
Multiple checkboxes
Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "Multiple checkboxes",
  "required": true,
  "disabled": true
}) }}
Twig
<fieldset
  class="form-group disabled required">
  <legend>
    Multiple checkboxes
  </legend>
  <div class="form-help-text"
    id="help-text-form_multiCbox2">
    Help text
  </div>

  <div class="form-collection"
    aria-described-by="help-text-form_multiCbox2">

    <div class="form-check">
      <input type="checkbox"
        id="form_multiCbox2_0"
        name="form[multiCbox2][]"
        disabled="disabled"
        class="form-check-input"
        value="1">
      <label for="form_multiCbox2_0"
        class="form-label">
        Option 1
      </label>
    </div>

    <!--Other .form-check nodes-->

  </div>
</fieldset>
Markup

Multiple stacked checkboxes without fieldsettoplink

For cases where checkboxes must be inserted in a fieldset already present in the markup. In this case, the help parameter takes no effects.
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "Multiple checkboxes",
  "params": {
    "collection_container": false
  }
}) }}
Twig
<div class="form-collection form-group"
  aria-described-by="help-text-form_multiCbox3">

  <div class="form-check">
    <input type="checkbox"
      id="form_multiCbox3_0"
      name="form[multiCbox3][]"
      class="form-check-input"
      value="1">
    <label for="form_multiCbox3_0"
      class="form-label">
      Option 1
    </label>
  </div>

  <!--Other .form-check nodes-->

</div>
Markup

Multiple stacked checkboxes without fieldset + required + disabled toplink

Same of previous with disabled and required parameter. Note that the required parameter takes no effect.
{{ form_row(form.xxxx, {
  "label": "Multiple checkboxes",
  "disabled": true,
  "required": true,
  "params": {
    "collection_container": false
  }
}) }}
Twig
<div
  class="form-collection form-group disabled required">

  <div class="form-check">
    <input type="checkbox"
      id="form_multiCbox4_0"
      name="form[multiCbox4][]"
      disabled="disabled"
      class="form-check-input"
      value="1">
    <label for="form_multiCbox4_0"
      class="form-label">
      Option 1
    </label>
  </div>

  <!--Other .form-check nodes-->

</div>
Markup

Multiple stacked checkboxes + multiple columnstoplink

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 
{{ form_row(form.xxxx, {
  "label": "Multiple checkboxes",
  "params": {
    "columns": {
      "sm": 1,
      "md": 2
    }
  }
}) }}
Twig
<fieldset class="form-group">
  <legend>
    Multiple checkboxes
  </legend>

  <div
    class="form-collection rcolumns rcolumns-sm-1 rcolumns-md-2">

    <div class="form-check">
      <input type="checkbox"
        id="form_multiCbox5_0"
        name="form[multiCbox5][]"
        class="form-check-input"
        value="1">
      <label for="form_multiCbox5_0"
        class="form-label">
        Option 1
      </label>
    </div>

    <!--Other .form-check nodes-->

  </div>
</fieldset>
Markup

Multiple checkboxes + inlinetoplink

Checkboxes are rendered as inline elements. This option is obviously incompatible with multiple columns
Multiple checkboxes
Help text
{{ form_row(form.xxxx, {
  "label": "Multiple checkboxes",
  "help": "Help text",
  "params": {
    "inline": true
  }
}) }}
Twig
<fieldset class="form-group">
  <legend>
    Multiple checkboxes
  </legend>
  <div class="form-help-text"
    id="help-text-form_multiCbox6">
    Help text
  </div>

  <div class="form-collection"
    aria-described-by="help-text-form_multiCbox6">

    <div
      class="form-check form-check-inline">
      <input type="checkbox"
        id="form_multiCbox6_0"
        name="form[multiCbox6][]"
        class="form-check-input"
        value="1">
      <label for="form_multiCbox6_0"
        class="form-label">
        Option 1
      </label>
    </div>

    <!--Other .form-check nodes-->

  </div>
</fieldset>
Markup

Multiple stacked checkboxes + custom controltoplink

Note that actually multiple checkboxes with custom controls don't fully support all the parameters like disabled, required etc...
Multiple checkboxes 
{{ form_row(form.xxxx, {
  "label": "Multiple checkboxes",
  "params": {
    "bs_custom_control": true
  }
}) }}
Twig
<fieldset class="form-group">
  <legend>
    Multiple checkboxes
  </legend>

  <div class="form-collection">

    <div
      class="custom-control custom-checkbox">
      <input type="checkbox"
        id="form_multiCbox7_0"
        name="form[multiCbox7][]"
        class="custom-control-input"
        value="1">
      <label
        class="custom-control-label form-label"
        for="form_multiCbox7_0">
        Option 1
      </label>

    </div>

    <!--Other .custom-control nodes-->
  </div>
</fieldset>
Markup

Grouped stacked checkboxestodotoplink

Still working on...

Radiostoplink

Stacked radio buttonstoplink

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
{{ form_row(form.xxxx, {
  "label": "Radio buttons",
  "help": "Help text",
  "params": {
    "container_attr": {
      "data-some-data": "abcd",
      "class": "custom-class"
    }
  }
}) }}
Twig
<fieldset data-some-data="abcd"
  class="custom-class form-group">
  <legend>
    Radio buttons
  </legend>
  <div class="form-help-text"
    id="help-text-form_radios1">
    Help text
  </div>

  <div class="form-collection"
    aria-described-by="help-text-form_radios1">

    <div class="form-check">
      <input type="radio"
        id="form_radios1_0"
        name="form[radios1]"
        class="form-check-input"
        value="1">
      <label for="form_radios1_0"
        class="form-label">
        Yes
      </label>
    </div>

    <!--Other .form-check nodes-->

  </div>
</fieldset>
Markup

Inline radio buttonstoplink

Radio buttons
Help text
{{ form_row(form.xxxx, {
  "label": "Radio buttons",
  "help": "Help text",
  "params": {
    "inline": true
  }
}) }}
Twig
<fieldset class="form-group">
  <legend>
    Radio buttons
  </legend>
  <div class="form-help-text"
    id="help-text-form_radios2">
    Help text
  </div>

  <div class="form-collection"
    aria-described-by="help-text-form_radios2">

    <div
      class="form-check form-check-inline">
      <input type="radio"
        id="form_radios2_0"
        name="form[radios2]"
        class="form-check-input"
        value="1">
      <label for="form_radios2_0"
        class="form-label">
        Yes
      </label>
    </div>

    <!--Other .form-check nodes-->

  </div>
</fieldset>
Markup

Multiselecttoplink

A way to handle multiple checkboxes or radio buttons using a dropdown panel.

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 as described in Bootstrap buttons docs.

Version 3 of Symfony-bootstrap-form-theme dropped the dependency from Bootstrap JS component, but it still relies to the Bootstrap Dropdown CSS.

TODO: css for sizing classes

Standard multiSelecttoplink

Basic dropdown with checkboxes
Multiselect 
{{ form_row(form.xxxx, {
  "label": "Multiselect",
  "params": {
    "multiselect": true
  }
}) }}
Twig
<fieldset class="form-group">
  <legend>
    Multiselect
  </legend>

  <div
    class="btn-group form-multiselect">

    <button type="button"
      class="btn dropdown-toggle btn-multiselect"
      aria-haspopup="true"
      aria-expanded="false">

      <span
        class="form-multiselect-placeholder">
        &nbsp;
      </span>

    </button>

    <div class="dropdown-menu">

      <div class="form-collection">

        <div class="form-check">
          <input type="checkbox"
            id="form_multiSelect1_0"
            name="form[multiSelect1][]"
            class="form-check-input"
            value="1">
          <label
            for="form_multiSelect1_0"
            class="form-label">
            Option 1
          </label>
        </div>

        <!--Other .form-check nodes-->

      </div>
    </div>

  </div>

</fieldset>
Markup

Multiselect with columnstoplink

Basic dropdown with radio buttons arranged in columns and custom options
Multiselect 
{{ form_row(form.xxxx, {
  "label": "Multiselect",
  "params": {
    "multiselect": {
      "placeholder": "Choose an option",
      "button_class": "btn-outline-primary",
      "menu_class": "dropdown-menu-md-right"
    },
    "columns": {
      "sm": 1,
      "md": 2
    }
  }
}) }}
Twig
<fieldset class="form-group">
  <legend>
    Multiselect
  </legend>

  <div
    class="btn-group form-multiselect">

    <button type="button"
      class="btn dropdown-toggle btn-outline-primary"
      aria-haspopup="true"
      aria-expanded="false">

      <span
        class="form-multiselect-placeholder">
        Choose an option
      </span>

    </button>

    <div
      class="dropdown-menu dropdown-menu-md-right">

      <div
        class="form-collection rcolumns rcolumns-sm-1 rcolumns-md-2">

        <div class="form-check">
          <input type="radio"
            id="form_multiSelect2_0"
            name="form[multiSelect2]"
            class="form-check-input"
            value="1">
          <label
            for="form_multiSelect2_0"
            class="form-label">
            Option 1
          </label>
        </div>

        <!--Other .form-check nodes-->

      </div>
    </div>

  </div>

</fieldset>
Markup

Selecttoplink

Standard select fieldtoplink

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
{{ form_row(form.xxxx, {
  "label": "Select field",
  "help": "Help text",
  "required": true
}) }}
Twig
<div class="form-group required">
  <label for="form_select1"
    class="form-label">
    Select field
  </label>

  <select id="form_select1"
    name="form[select1]"
    required="required"
    class="form-select"
    aria-described-by="help-text-form_select1">
    <option value=""
      selected="selected">
      Select an option...
    </option>
    <!--Other `option` nodes-->
  </select>
  <div class="form-help-text"
    id="help-text-form_select1">
    Help text
  </div>
</div>
Markup

Select field with optgrouptoplink

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
{{ form_row(form.xxxx, {
  "label": "Select field",
  "help": "Help text",
  "required": false,
  "params": {
    "bs_custom_control": false
  }
}) }}
Twig
<div class="form-group">
  <label for="form_select2"
    class="form-label">
    Select field
  </label>

  <select id="form_select2"
    name="form[select2]"
    class="form-control"
    aria-described-by="help-text-form_select2">
    <optgroup label="Group A">

      <option value="1">
        Option 1
      </option>
      <!--Other `option` nodes-->
    </optgroup>
    <!--Other `optgroup` nodes-->
  </select>
  <div class="form-help-text"
    id="help-text-form_select2">
    Help text
  </div>
</div>
Markup

Select field with optgroup and multiple attributetoplink

Help text
{{ form_row(form.xxxx, {
  "label": "Select field",
  "help": "Help text"
}) }}
Twig
<div class="form-group">
  <label for="form_select3"
    class="form-label">
    Select field
  </label>

  <select id="form_select3"
    name="form[select3][]"
    class="form-select"
    aria-described-by="help-text-form_select3"
    multiple="multiple">
    <optgroup label="Group A">

      <option value="1">
        Option 1
      </option>
      <!--Other `option` nodes-->
    </optgroup>
    <!--Other `optgroup` nodes-->
  </select>
  <div class="form-help-text"
    id="help-text-form_select3">
    Help text
  </div>
</div>
Markup

Input groupstoplink

Options to add text, buttons, or button groups on either side of textual inputs, selects, or file inputs. See hhttps://getbootstrap.com/docs/5.1/forms/input-group/.
This option does not include all the options of variations of the Bootstrap 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 grouptoplink

Input field with text before and after
$ .00
Help text
{{ form_row(form.xxxx, {
  "label": "Input group",
  "help": "Help text",
  "type": "number",
  "attr": {
    "step": 10
  },
  "params": {
    "before": "$",
    "after": [
      {
        "type": "markup",
        "content": "<span class=\"input-group-text text-danger\">.00</span>"
      }
    ]
  }
}) }}
Twig
<div class="form-group">
  <label for="form_inputGroup1"
    class="form-label">
    Input group
  </label>
  <div class="input-group">

    <span class="input-group-text">
      $
    </span>
    <input type="number"
      id="form_inputGroup1"
      name="form[inputGroup1]" step="10"
      class="form-control"
      aria-described-by="help-text-form_inputGroup1">

    <span
      class="input-group-text text-danger">
      .00
    </span>
  </div>
  <div class="form-help-text"
    id="help-text-form_inputGroup1">
    Help text
  </div>
</div>
Markup

Select input grouptoplink

Select field with text and button at the end
Some text
Help text
{{ form_row(form.xxxx, {
  "label": "Select input group",
  "help": "Help text",
  "required": true,
  "params": {
    "after": [
      "Some text",
      {
        "type": "markup",
        "content": "<button class=\"btn btn-secondary\" type=\"button\">Button</button>"
      }
    ]
  }
}) }}
Twig
<div class="form-group required">
  <label for="form_inputGroup2"
    class="form-label">
    Select input group
  </label>
  <div class="input-group">

    <select id="form_inputGroup2"
      name="form[inputGroup2]"
      required="required"
      class="form-select"
      aria-described-by="help-text-form_inputGroup2">
      <option value=""
        selected="selected">
        Choose an option...
      </option>
      <!--Other `option` nodes-->
    </select>

    <span class="input-group-text">
      Some text
    </span>
    <button class="btn btn-secondary"
      type="button">
      Button
    </button>
  </div>
  <div class="form-help-text"
    id="help-text-form_inputGroup2">
    Help text
  </div>
</div>
Markup

Other elementstoplink

Textareatoplink

Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "form label",
  "attr": {
    "placeholder": "Placeholder text"
  }
}) }}
Twig
<div class="form-group">
  <label for="form_textarea1"
    class="form-label">
    form label
  </label>
  <textarea id="form_textarea1"
    name="form[textarea1]"
    placeholder="Placeholder text"
    class="form-control"
    aria-described-by="help-text-form_textarea1">
</textarea>
  <div class="form-help-text"
    id="help-text-form_textarea1">
    Help text
  </div>
</div>
Markup

Rangetoplink

TODO: current value label, step labels

Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "Range label",
  "type": "range",
  "attr": {
    "min": 1,
    "max": 10,
    "step": 1
  }
}) }}
Twig
<div class="form-group">
  <label for="form_range1"
    class="form-label">
    Range label
  </label>

  <input type="range" id="form_range1"
    name="form[range1]" min="1" max="10"
    step="1" class="form-control"
    aria-described-by="help-text-form_range1">
  <div class="form-help-text"
    id="help-text-form_range1">
    Help text
  </div>
</div>
Markup

Filetoplink

Help text
{{ form_row(form.xxxx, {
  "help": "Help text",
  "label": "File label",
  "type": "file"
}) }}
Twig
<div class="form-group">
  <label for="form_file1"
    class="form-label">
    File label
  </label>
  <input type="file" id="form_file1"
    name="form[file1]"
    class="form-control-file"
    aria-described-by="help-text-form_file1">
  <div class="form-help-text"
    id="help-text-form_file1">
    Help text
  </div>
</div>
Markup

Back to index