Select
Preview
Usage
views.py
python
from djust import LiveView
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.options = [{'value': 'opt1', 'label': 'Option 1'}, {'value': 'opt2', 'label': 'Option 2'}, {'value': 'opt3', 'label': 'Option 3'}]my_template.html
django
{% load theme_components %}
{% theme_select name='gallery_select' label='Select Field' options=options placeholder='Choose...' %}Props
| Name | Type | Required | Default |
|---|---|---|---|
| name | str | required | — |
| label | Optional[str] | — | |
| options | list | — | |
| placeholder | str | — | |
| css_prefix | str | — | |
| attrs | dict | — | |
| slot_label | str | — | |
| slot_select | str | — | |
| slot_help_text | str | — | |
| slot_error | str | — |
Accessibility
| Requirement | Element | Attribute | Value |
|---|---|---|---|
| Label must reference select via for attribute | label | for | (present) |
Slots
slot_label slot_select slot_help_text slot_error
Source & styles
| File | Path | Notes |
|---|---|---|
| template | djust_theming/components/select.html | Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/. |
Template source — select.html
django
<div class="{{ css_prefix }}select-group {% if attrs.class %}{{ attrs.class }}{% endif %}">
{% if slot_label %}
{{ slot_label|safe }}
{% elif label %}
<label for="{{ name }}" class="{{ css_prefix }}select-label">{{ label }}</label>
{% endif %}
{% if slot_select %}
{{ slot_select|safe }}
{% else %}
<select
name="{{ name }}"
id="{{ name }}"
class="{{ css_prefix }}select"
{% if attrs.required %}required{% endif %}
{% if attrs.disabled %}disabled{% endif %}
>
{% if placeholder %}
<option value="" disabled selected>{{ placeholder }}</option>
{% endif %}
{% for opt in options %}
<option value="{{ opt.value }}" {% if opt.selected %}selected{% endif %}>{{ opt.label }}</option>
{% endfor %}
</select>
{% endif %}
{% if slot_help_text %}
<div class="{{ css_prefix }}select-help">{{ slot_help_text|safe }}</div>
{% endif %}
{% if slot_error %}
<div class="{{ css_prefix }}select-error" role="alert">{{ slot_error|safe }}</div>
{% endif %}
</div>