Widgets Overview

Django Gentelella Widgets provides a comprehensive set of form widgets that replace Django’s default widgets with Bootstrap 5 styled, feature-rich alternatives.

Quick Start

Import widgets from the core module:

from djgentelella.widgets import core as genwidgets

Use them in your forms:

from django import forms
from djgentelella.forms.forms import GTForm
from djgentelella.widgets import core as genwidgets

class MyForm(GTForm, forms.Form):
    name = forms.CharField(widget=genwidgets.TextInput)
    email = forms.EmailField(widget=genwidgets.EmailInput)
    birth_date = forms.DateField(widget=genwidgets.DateInput)

Or with ModelForm:

class MyModelForm(GTForm, forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['name', 'email', 'country', 'description']
        widgets = {
            'name': genwidgets.TextInput,
            'email': genwidgets.EmailInput,
            'country': genwidgets.Select,
            'description': genwidgets.Textarea,
        }

Widget Categories

Core Inputs (djgentelella.widgets.core)

  • TextInput - Text input field

  • NumberInput - Integer input

  • FloatInput - Decimal input

  • EmailInput - Email field

  • URLInput - URL field

  • PasswordInput - Password field

  • HiddenInput - Hidden field

  • ColorInput - Color picker

  • Textarea - Multi-line text

Select Widgets (djgentelella.widgets.core)

  • Select - Single select dropdown (Select2)

  • SelectMultiple - Multi-select dropdown

  • SelectWithAdd - Select with add new option

  • SelectMultipleAdd - Multi-select with add new

  • RadioHorizontalSelect / RadioVerticalSelect - Radio buttons

  • NullBooleanSelect - Yes/No/Unknown

  • CheckboxInput - Single checkbox

  • CheckboxSelectMultiple - Multiple checkboxes

Date/Time Widgets (djgentelella.widgets.core)

  • DateInput - Date picker

  • DateTimeInput - DateTime picker

  • TimeInput - Time picker

  • DateRangeInput - Date range selector

  • DateRangeInputCustom - Date range with presets

  • DateRangeTimeInput - DateTime range

  • SplitDateTimeWidget - Separate date/time inputs

  • SelectDateWidget - Dropdown date selector

Masked Inputs (djgentelella.widgets.core)

  • EmailMaskInput - Email with mask

  • PhoneNumberMaskInput - Phone with mask

  • DateMaskInput - Date with mask

  • CreditCardMaskInput - Credit card format

  • TaxIDMaskInput - Tax ID format

  • SerialNumberMaskInput - Serial number format

File Widgets (djgentelella.widgets.core and djgentelella.widgets.files)

  • FileInput - File upload with chunking

  • ClearableFileInput - File with clear option

  • FileChunkedUpload - Large file upload

  • ImageRecordInput - Camera capture

  • VideoRecordInput - Video recording

  • AudioRecordInput - Audio recording

Autocomplete Widgets (djgentelella.widgets.selects)

  • AutocompleteSelect - Single select with remote search

  • AutocompleteSelectMultiple - Multi-select with remote search

  • AutocompleteSelectImage - Image selection

  • AutocompleteSelectMultipleImage - Multiple image selection

Slider Widgets (djgentelella.widgets.core)

  • GridSlider - Range slider

  • SingleGridSlider - Single value slider

  • DateGridSlider - Date range slider

Special Widgets

  • YesNoInput - Toggle with field visibility control

  • NumberKnobInput - Circular knob input (djgentelella.widgets.numberknob)

  • TaggingInput / EmailTaggingInput - Tag inputs (djgentelella.widgets.tagging)

  • EditorTinymce - WYSIWYG editor (djgentelella.widgets.tinymce)

  • CalendarInput - Calendar widget (djgentelella.widgets.calendar)

  • DigitalSignatureInput - Digital signature (djgentelella.widgets.digital_signature)

Visualization Widgets (readonly display)

  • UrlTimeLineInput - Timeline display (djgentelella.widgets.timeline)

  • UrlStoryLineInput - Storyline display (djgentelella.widgets.storyline)

  • MapBasedStoryMapInput - Map story (djgentelella.widgets.storymap)

  • GigaPixelStoryMapInput - High-res image story (djgentelella.widgets.storymap)

Tree Widgets (djgentelella.widgets.trees)

  • TreeSelect - Hierarchical single select

  • TreeSelectMultiple - Hierarchical multi-select

  • TreeSelectWithAdd - Tree select with add new

  • TreeSelectMultipleWithAdd - Tree multi-select with add new

Passing Attributes

All widgets accept an attrs parameter for HTML attributes:

class MyForm(GTForm, forms.Form):
    name = forms.CharField(
        widget=genwidgets.TextInput(attrs={
            'placeholder': 'Enter your name',
            'class': 'custom-class',
            'data-custom': 'value',
            'maxlength': 100,
        })
    )

Common attributes:

  • placeholder - Placeholder text

  • class - Additional CSS classes

  • data-* - Custom data attributes for JavaScript

  • disabled - Disable the input

  • readonly - Make read-only

API Reference

Core Widgets

class djgentelella.widgets.core.AudioRecordInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.CheckboxInput(attrs=None)
class djgentelella.widgets.core.ClearableFileInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.ColorInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.CreditCardMaskInput(attrs=None, format=None)
class djgentelella.widgets.core.DateInput(attrs=None, format=None)

Warning

Set in settings

USE_L10N = False

DATE_INPUT_FORMATS=[ ‘%Y-%m-%d’,’%d/%m/%Y’,’%d/%m/%y’]

By limitation on js datetime widget format conversion

class djgentelella.widgets.core.DateMaskInput(attrs=None)
class djgentelella.widgets.core.DateRangeInput(attrs=None, format=None)
class djgentelella.widgets.core.DateRangeInputCustom(attrs=None, format=None)
class djgentelella.widgets.core.DateRangeTimeInput(attrs=None, format=None)
class djgentelella.widgets.core.DateTimeInput(attrs=None, format=None)

Warning

Set in settings

USE_L10N = False

DATETIME_INPUT_FORMATS=[ ‘%m/%d/%Y %H:%M %p’ ]

By limitation on js datetime widget format conversion

class djgentelella.widgets.core.DateTimeMaskInput(attrs=None)
class djgentelella.widgets.core.EmailInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.EmailMaskInput(attrs=None)
class djgentelella.widgets.core.FileInput(attrs=None, extraskwargs=True)
format_value(value)

File input never renders a value.

value_from_datadict(data, files, name)

File widgets take data from FILES, not POST

class djgentelella.widgets.core.FloatInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.HiddenInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.ImageRecordInput(attrs=None, extraskwargs=True)

You can set the preview size using data-width and data-height.

class djgentelella.widgets.core.Input(attrs=None, extraskwargs=True)

Base class for all <input> widgets.

class djgentelella.widgets.core.NumberInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.PasswordInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.PhoneNumberMaskInput(attrs=None)
class djgentelella.widgets.core.PhoneNumberTwoDigitMaskInput(attrs=None)
class djgentelella.widgets.core.SelectDateWidget(attrs=None)
class djgentelella.widgets.core.SerialNumberMaskInput(attrs=None, format=None)
class djgentelella.widgets.core.SplitDateTimeWidget(attrs=None)
property media

Media for a multiwidget is the combination of all media of the subwidgets.

class djgentelella.widgets.core.SplitHiddenDateTimeWidget(attrs=None)
property media

Media for a multiwidget is the combination of all media of the subwidgets.

class djgentelella.widgets.core.TaxIDMaskInput(attrs=None, format=None)
class djgentelella.widgets.core.TextInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.TimeInput(attrs=None, format=None)
class djgentelella.widgets.core.URLInput(attrs=None, extraskwargs=True)
class djgentelella.widgets.core.VideoRecordInput(attrs=None, extraskwargs=True)

You can set the preview size using data-width and data-height.

Note

Size of video depends on camera default configuration.

class djgentelella.widgets.core.YesNoInput(attrs=None, shparent='.form-group')

Tree Widgets

Django Gentelella uses django-tree-queries for tree database representations.

TinyMCE Widget