Last active
April 18, 2019 12:28
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
andform_widget
in the div with theform-check
class, and theform-check
div needs to be wrapped in a div withform-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