Input: Type Color

{%- 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 -%}
<!-- FIELD Component -->
<div class="kx-form__element{% for class in classes %} {{ class }}{% endfor %}">
    {% 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 -%}
    <input class="kx-field{% if size %} kx-field--size-{{ size }}{% endif %}{% if hideSpinBtn == true %} kx-hide-spin-button{% endif %}{{ ' kx-is-invalid' if error }}{{ ' kx-hide-required' if hideRequired }}" id="{{ id }}" type="{{ type }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if value %} value="{{ value }}"{% endif %}{{ ' disabled="disabled"' if disabled }}{{ ' required="required"' if required }}{{ ' readonly' if readonly }}{% if type == 'range' %} step="any"{% endif %} />
    <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>
</div>