Checkboxes in Django-Materialize

Django is a high-level Python Web framework that enables rapid development and structured design. Materialize is a modern responsive CSS framework based on Material Design by Google. When used together, Django and Materialize, one can quickly build good looking and efficient applications that work in all devices.

Here we show an example how checkboxes work in Django-Materialize framework. This is a simple task, but because of the lack of proper documentation and examples, the usage may be challenging.

First we install the django and materialize packages

$ pip install django
$ pip install django-material

and create the initial project

$ django-admin startproject mysite .
$ python startapp main

Next we modify the file and add ’main.apps.MainConfig’ and ’material’ into it


In, we create a class that contains the fields of the checkbox

from django.db import models

class Check_Form(models.Model):
   FieldA = models.CharField(max_length=10)
   FieldB = models.CharField(max_length=10)
   FieldC = models.CharField(max_length=10)

Next we create a new file, which uses the material design form class. Here we also define the checkbox content and layout.

from django import forms
from .models import Check_Form
from material import Layout, Fieldset, Row

class Web_Form(forms.Form):

   animalA = forms.BooleanField(required=False, label='Tiger')
   animalB = forms.BooleanField(required=False, label='Elephant')
   animalC = forms.BooleanField(required=False, label='Unicorn')
   layout = Layout(Fieldset('Animals in zoo:'),

In file we render the homepage. As an example how to pre-populate the checkbox fields, we call the Web_Form defined in and access to checkbox values with a dictionary.

from django.shortcuts import render
from .forms import Web_Form

def homepage(request):
   Tigers = True
   Elephans = False
   Unicorns = True
   form = Web_Form(initial=dict(animalA=Tigers,animalB=Elephans,animalC=Unicorns))
   return render(request = request,
     context = {'form':form })

What remains, is the small change in the files. The (mysite) is

from django.contrib import admin
from django.urls import path, include

urlpatterns = [    path("", include('main.urls')),

and (main) takes the form

from django.urls import path from . import views

app_name = "main"

urlpatterns = [    path("", views.homepage, name="homepage"), ]

Finally, we provide an example of the homepage.html. Here we first import and load the materialize CSS and javascript, and then show the pre-populated checkbox form.

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="">
<!-- Compiled and minified JavaScript for Materialize CSS -->
<script src=""></script>
{% load material_form %}


<form method="POST" >
   {% csrf_token %}
   {% form form=form %}
   {% endform %}

The end result of this example looks like the following:

Checkbox example

More information about the Materialize checkbox colors, shapes and details can be found here .

Back to the main page.