<div class="kx-form__element">
<span class="kx-form__hint">
<span class="kx-form__hint__txt">Helper text for content</span>
</span>
<textarea class="kx-field kx-field--size-base" name="" id="--45928">Test</textarea>
<label class="kx-label" for="--45928">
Label for textarea
</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 -%}
<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">
<span class="kx-form__hint__txt">{{ error }}</span>
</span>
{% endif -%}
<textarea class="kx-field{% if size %} kx-field--size-{{ size }}{% endif %}{{ ' kx-is-invalid' if error }}{{ ' kx-hide-required' if hideRequired }}" name="" id="{{ id }}"{% if cols %} cols="{{ cols }}"{% endif %}{% if rows %} rows="{{ rows }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{{ ' disabled="disabled"' if disabled }}{{ ' required="required"' if required }}>{{ value }}</textarea>
<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>
{
"id": null,
"classes": null,
"name": null,
"labelTxt": null,
"hideLabel": null,
"required": null,
"hideRequired": null,
"optional": null,
"value": "Test",
"disabled": null,
"placeholder": null,
"hint": null,
"error": null,
"rows": null,
"size": "base"
}
- Handle: @textarea
- Preview:
- Filesystem Path: src\components\form\textarea\textarea.njk
There are no notes for this item.