Select

<!-- SELECT Component -->
<div class="kx-form__element">
    <select class="kx-field kx-field--size-large" id="--94841">
        <option value="1">foo</option>
        <option value="2">bar</option>
        <option value="3">baz</option>
    </select>
    <label class="kx-label" for="--94841">
        Label
    </label>
</div>
{%- if id -%}
    {% set random_number = range(0, 100000) | random -%}
    {% set id = id | replace(' ', '-') | lower + '--' + random_number -%}
{%- else -%}
    {% set random_number = range(0, 100000) | random -%}
    {% set id = label | replace(' ', '-') | lower + '--' + random_number -%}
{% endif -%}
<!-- SELECT Component -->
<div class="kx-form__element{% for class in classes %} {{ class }}{% endfor %}">
    <select class="kx-field{% if size %} kx-field--size-{{ size }}{% endif %}{% for class in classes %} {{ class }}{% endfor %}{{ ' kx-is-invalid' if error }}{{ ' kx-hide-required' if hideRequired }}" id="{{ id }}">
        {%- for option in options %}
        <option value="{{ option.value }}"{{ ' selected' if option.selected }}>{{ option.txt }}</option>
        {%- endfor %}
    </select>
    <label class="kx-label{% if hideLabel == true %} kx-is-vishidden{% endif %}" for="{{ id }}">
        {{ labelTxt }}{%- if optionalTxt %}<span class="kx-form__optional">({{ optionalTxt }})</span>{% endif %}
    </label>
    {% if hint -%}
    <span class="kx-form__hint">
        <span class="kx-form__hint__txt">{{ hint }}</span>
    </span>
    {% endif -%}
    {% if error -%}
    <span class="kx-form__hint kx-form__hint--error">
        {% render '@icon', { symbol: 'warning', size: 'small' } %}
        <span class="kx-form__hint__txt">{{ error }}</span>
    </span>
    {% endif -%}
</div>
{
  "id": null,
  "classes": null,
  "name": null,
  "labelTxt": null,
  "hideLabel": null,
  "required": null,
  "hideRequired": null,
  "optional": null,
  "value": null,
  "disabled": null,
  "hint": null,
  "error": null,
  "selected": null,
  "size": "large",
  "options": [
    {
      "txt": "Add more options",
      "value": 1,
      "selected": null
    }
  ]
}

There are no notes for this item.