Skip to content

Instantly share code, notes, and snippets.

@ThePeterMick
Last active April 18, 2019 12:28
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save ThePeterMick/b348805aa394d63395cfd30a2598ba2d to your computer and use it in GitHub Desktop.
Save ThePeterMick/b348805aa394d63395cfd30a2598ba2d to your computer and use it in GitHub Desktop.
Display label and checkbox separately for bootstrap 4 in Twig for Symfony 4
{% form_theme form _self %}
{% block checkbox_widget -%}
{%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
{%- if 'checkbox-custom' in parent_label_class -%}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' custom-control-input')|trim}) -%}
<div class="custom-control custom-checkbox{{ 'checkbox-inline' in parent_label_class ? ' custom-control-inline' }}">
{{ block('checkbox_widget_base') }}
</div>
{%- else -%}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%}
{{ block('checkbox_widget_base') }}
{%- endif -%}
{%- endblock checkbox_widget %}
{%- block checkbox_widget_base -%}
<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock checkbox_widget_base -%}
{% block checkbox_label %}
{# {% block _user_registration_form_termsAccepted_label %} - use this if you need it for just a single field, amend accordingly to your form type/field #}
{#- pulled from bootstrap_4_layout.html.twig and appended |raw to the end of label line -#}
{% set is_parent_custom = parent_label_class is defined and ('checkbox-custom' in parent_label_class or 'radio-custom' in parent_label_class) %}
{% set is_custom = label_attr.class is defined and ('checkbox-custom' in label_attr.class or 'radio-custom' in label_attr.class) %}
{%- if is_parent_custom or is_custom -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' custom-control-label')|trim}) -%}
{%- else %}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-check-label')|trim}) -%}
{%- endif %}
{%- if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif -%}
{%- if required -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) -%}
{%- endif -%}
{%- if parent_label_class is defined -%}
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|replace({'checkbox-inline': '', 'radio-inline': '', 'checkbox-custom': '', 'radio-custom': ''})|trim}) -%}
{%- endif -%}
{%- if label is not same as(false) and label is empty -%}
{%- if label_format is not empty -%}
{%- set label = label_format|replace({
'%name%': name,
'%id%': id,
}) -%}
{%- else -%}
{%- set label = name|humanize -%}
{%- endif -%}
{%- endif -%}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>
{{- label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans({}, translation_domain)) -}}
{{- form_errors(form) -}}
</label>
{% endblock %}
...
<div class="form-group">
<div class="form-check">
{{ form_widget(form.termsAccepted) }}
{{ form_label(form.termsAccepted) }}
</div>
</div>
@ThePeterMick
Copy link
Author

If you need to output the label and the widget separately you will need to override the below templates within your form theme, it will then let you output the label and widget separately. Note that you will need to manually wrap form_label and form_widget in the div with the form-check class, and the form-check div needs to be wrapped in a div with form-group class.
The example assumes you are placing the new blocks within the actual Twig view, to place in an external file see: https://symfony.com/doc/current/form/form_themes.html
If you need this for bootstrap 3 just do the same but make sure you pull out the relevant blocks from bootstrap_3_layout.html.twig

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment