Symfony2 form theme to integrate Materialize in your Symfony2 forms

materialize_form_theme.html.twig

{% extends 'form_div_layout.html.twig' %}

{% block form_row -%}
    <div class="row{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
        <div class="input-field col s12">
            {{- form_widget(form) -}}
            {{- form_label(form) -}}
            {{- form_errors(form) -}}
        </div>
    </div>
{%- endblock form_row %}

{% block form_widget_simple %}
    {% if type is not defined or type not in ['file', 'hidden'] %}
        {%- set attr = attr|merge({class: (attr.class|default(''))|trim}) -%}
    {% endif %}
    {{- parent() -}}
    {% if tooltip is defined %}
        <span class="material-icons dp48 tooltipped"
              data-position="bottom" data-delay="50" data-tooltip="{{ tooltip }}">error
        </span>
    {% endif %}
{% endblock form_widget_simple %}

{% block form_label -%}
    {%- set label_attr = label_attr|merge({class: (label_attr.class|default(''))|trim}) -%}
    {{- parent() -}}
{%- endblock form_label %}

{% block checkbox_row -%}
    <div class="row {% if not valid %} has-error{% endif %}">
        {{- form_widget(form) -}}
        {{- form_label(form) -}}
        {{- form_errors(form) -}}
    </div>
{%- endblock checkbox_row %}

{% block checkbox_widget -%}
    <input type="checkbox" class="filled-in"{{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock checkbox_widget %}

{# Checkbox label is raw here #}
{%- block checkbox_label -%}
    {% if label is not same as(false) -%}
        {% 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 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 %}>
            {{ translation_domain is same as(false) ? label|raw : label|trans({}, translation_domain)|raw }}
        </label>
    {%- endif -%}
{%- endblock -%}

{% block button_widget -%}
    {% set attr = attr|merge({class: (attr.class|default('waves-effect waves-light') ~ ' btn')|trim}) %}
    {{- parent() -}}
{%- endblock %}

{%- block choice_widget_collapsed -%}
    {%- if required and placeholder is none and not placeholder_in_choices and not multiple and (attr.size is not defined or attr.size <= 1) -%}
        {% set required = false %}
    {%- endif -%}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
        {%- if placeholder is not none -%}
            <option value=""{% if required %} disabled="disabled" {% if value is empty %} selected="selected"{% endif %}{% endif %}>{{ placeholder != '' ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) }}</option>
        {%- endif -%}
        {%- if preferred_choices|length > 0 -%}
            {% set options = preferred_choices %}
            {{- block('choice_widget_options') -}}
            {%- if choices|length > 0 and separator is not none -%}
                <option disabled="disabled">{{ separator }}</option>
            {%- endif -%}
        {%- endif -%}
        {%- set options = choices -%}
        {{- block('choice_widget_options') -}}
    </select>
{%- endblock choice_widget_collapsed -%}

{%- block textarea_widget -%}
    {% set attr = attr|merge({class: (attr.class|default('') ~ 'materialize-textarea')|trim}) %}
    {{ parent() }}
{%- endblock -%}

{%- block form_errors -%}
    {%- if errors|length > 0 -%}
        <ul>
            {%- for error in errors -%}
                <li class="error">{{ error.message }}</li>
            {%- endfor -%}
        </ul>
    {%- endif -%}
{%- endblock form_errors -%}

Really liked it, thank you!

works perfectly with symfony2, thanks guys !

Thank you, very usefull :-)

Hi, amazing work, thanks so much

I have an issue and may be someone could give me a hand with it; I can not make it work with multiple select. Actually, I am getting a different html rendered than the one is generated from the example in http://materializecss.com/forms.html
Any idea what could I doing wrong?

My select html:

<div class="select-wrapper">
  <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-dd208459-f598-3e35-413d-5ae4925ae9d9">
  <ul id="select-options-dd208459-f598-3e35-413d-5ae4925ae9d9" class="dropdown-content select-dropdown multiple-select-dropdown" tabindex="0" style="">
      <li id="select-options-dd208459-f598-3e35-413d-5ae4925ae9d90" tabindex="0">
           <span>
              <label>
                    <input type="checkbox" "="">
                            <span>Option1</span>
                    </label>
               </span>
       </li>
 ....

Materializa example:

<li class="">
  <span>
    <input type="checkbox">
       <label>
       ::before
       ::after
       </label>
          Option 1
  </span>
</li>

Thanks in advance

Thank you so much. It still works very well today with Symfony 5. 👍

Only, now if you want a checkbox you have to open the label before the input.
I tried several things, without knowing too much about the twig and I propose to others my solution:

Just move this line :

<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>

Above this line :

<input type="checkbox" class="filled-in"{{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />

And put the following line in a span :

{{ translation_domain is same as(false) ? label|raw : label|trans({}, translation_domain)|raw }}

Like :

<span>{{ translation_domain is same as(false) ? label|raw : label|trans({}, translation_domain)|raw }}</span>

Great to know that it still works well with Symfony 5! 😄

And many thanks for this solution to make checkboxes working.

hello, what about the input type file?

{% block file_widget -%}
    <{{ element|default('div') }} class="file-field input-field">
    <div class="btn">
        <span>{{ 'File' | trans }}</span>
        <input name="{{ form.vars.full_name }}"
               id="{{ form.vars.id }}"
               type="{{ form.vars.type }}"
                {{ form.vars.required ? 'required' : '' }}
        >
    </div>
    <div class="file-path-wrapper">
        <input
                class="file-path validate"
                type="text"
                {%- if attr.placeholder is defined and attr.placeholder is not none -%}
                    placeholder="{{ attr.placeholder | trans }}"
                {%- endif -%}
        >
    </div>
    </{{ element|default('div') }}>
{%- endblock %}

hello, what about the input type file?

{% block file_widget -%}
    <{{ element|default('div') }} class="file-field input-field">
    <div class="btn">
        <span>{{ 'File' | trans }}</span>
        <input name="{{ form.vars.full_name }}"
               id="{{ form.vars.id }}"
               type="{{ form.vars.type }}"
                {{ form.vars.required ? 'required' : '' }}
        >
    </div>
    <div class="file-path-wrapper">
        <input
                class="file-path validate"
                type="text"
                {%- if attr.placeholder is defined and attr.placeholder is not none -%}
                    placeholder="{{ attr.placeholder | trans }}"
                {%- endif -%}
        >
    </div>
    </{{ element|default('div') }}>
{%- endblock %}

Thanks :)

Very nice Theme. I also tried to use it with my Symfony5 app, but I can't get the CountryType, BirthdayType and EntityType to work. Does anyone have a solution?

Very nice Theme. I also tried to use it with my Symfony5 app, but I can't get the CountryType, BirthdayType and EntityType to work. Does anyone have a solution?

hello here is how I declare my birthday type in my form:
->add('birthdayDateUser', DateType::class,[
'label' => 'Date d'anniverssaire',
'widget' => 'single_text',
'html5' => false,
'required' => false,
'format'=> 'dd-mm-yyyy',
'attr' => [
'class'=> 'datepicker',
]
])

Hi thanks for this template, still working in Symfony 5.3 !
My update to manage errors messages and 'form_help' as done in materialize styling : https://gist.github.com/thacac/a90b5cbdcde6d2214d0ff8d3c247f734