Input 

<!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large" id="--97772" type="color" />
    <label class="kx-label" for="--97772">
        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 -%}
<!-- 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>
 
{
  "element": "input",
  "type": "text",
  "id": null,
  "classes": null,
  "name": null,
  "labelTxt": null,
  "hideLabel": null,
  "hideSpinBtn": null,
  "required": null,
  "hideRequired": null,
  "readonly": null,
  "optional": null,
  "value": null,
  "disabled": null,
  "placeholder": null,
  "hint": null,
  "error": null,
  "size": "large"
}

There are no notes for this item.