Examples

Note that all examples are deliberately left unstyled to present the simplest implementation.

Select

Selected fruit: ''

Source

<!-- unicorn/templates/unicorn/select.html -->
<div>
    <select unicorn:model="selected_fruit">
        {% for fruit in fruits %}
        <option value="{{ fruit }}">{{ fruit }}</option>
        {% endfor %}
    </select>
    <br />

    Selected fruit: '{{ selected_fruit }}'
</div>

# unicorn/components/select.py
from django_unicorn.components import UnicornView


class SelectView(UnicornView):
    selected_fruit = ""
    fruits = [
        "Apple",
        "Grape",
        "Banana",
    ]

    class Meta:
        javascript_exclude = ("fruits",)