Select

Select input with options, labels, and validation support.

template 1 required 12 optional 4 slots 1 a11y rule

Reference Guide

Preview

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.name = 'gallery_select'
        self.label = 'Select Field'
        self.options = [{'value': 'opt1', 'label': 'Option 1'}, {'value': 'opt2', 'label': 'Option 2'}, {'value': 'opt3', 'label': 'Option 3'}]
        self.placeholder = 'Choose...'
my_template.html
django
{% load theme_components %}
{% theme_select name=name label=label options=options placeholder=placeholder %}

Props

NameTypeRequiredDefaultDescription
namestrrequired——
labelOptional[str]——
optionslist——
placeholderstr——
field_idstr——
has_selected_optionboolFalse—
extra_attrsstr——
css_prefixstr——
attrsdict——
slot_labelstr——
slot_selectstr——
slot_help_textstr——
slot_errorstr——

Accessibility

RequirementElementAttributeValue
Label must reference select via for attributelabelfor(present)

Slots

slot_label slot_select slot_help_text slot_error
Source & styles
FilePathNotes
templatedjust_theming/components/select.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 3 of this component's classes at line 1645, 1652, 1659. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--background --foreground --input --radius --ring
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="{{ field_id|default:name }}" class="{{ css_prefix }}select-label">{{ label }}</label>
    {% endif %}
    {% if slot_select %}
    {{ slot_select|safe }}
    {% else %}
    <select
        name="{{ name }}"
        id="{{ field_id|default:name }}"
        class="{{ css_prefix }}select"
        {% if attrs.required %}required{% endif %}
        {% if attrs.disabled %}disabled{% endif %}
        {{ extra_attrs }}
    >
        {% if placeholder %}
        <option value="" disabled{% if not has_selected_option %} selected{% endif %}>{{ 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>