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 -%}

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