Select — Component Storybook

LIVE PREVIEW 1

select(name=gallery_select, label=Select Field, options=[{'value': 'opt1', 'label': 'Option 1'}, {'value': 'opt2', 'label': 'Option 2'}, {'value': 'opt3', 'label': 'Option 3'}], placeholder=Choose...)

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 1

Name	Type	Default
`name`	`str`	—

PROPS — OPTIONAL 9

Name	Type	Default
`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 1

Requirement	Element	Attribute	Value
Label must reference select via for attribute	`label`	`for`	(present)

AVAILABLE SLOTS 4

slot_label slot_select slot_help_text slot_error

TEMPLATE SOURCE

select.html

<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>