<div class="c-form-field">
<div class="c-form-field__label">
<label class="c-label" for="input-id">
<span class="c-label__text">Form label</span>
</label>
</div>
<div class="c-form-field__control">
<div class="c-textarea">
<textarea class="c-textarea__control" id="input-id" rows="6" name="input-id"></textarea>
</div>
</div>
<p class="c-form-field__hint">Notes for the input field</p>
<p class="c-form-field__error">Error message</p>
</div>
<div class="c-form-field{% if modifier is defined %} {{ modifier }}{% endif %}">
<div class="c-form-field__label">
{% include "@label" with {
modifier: label.modifier,
required: label.required,
text: label.text,
id: input.id
} %}
</div>
<div class="c-form-field__control">
{% include "@textarea" with {
id: input.id,
rows: input.rows,
name: input.name is defined ? input.name : input.id,
required: input.required|default(false)
} %}
</div>
{% if hintText is defined %}
<p class="c-form-field__hint">{{ hintText }}</p>
{% endif %}
{% if errorText is defined %}
<p class="c-form-field__error">{{ errorText }}</p>
{% endif %}
</div>
{
"label": {
"text": "Form label",
"required": false
},
"input": {
"id": "input-id",
"rows": 6
},
"hintText": "Notes for the input field",
"errorText": "Error message"
}
.c-form-field__label {
margin-bottom: spacing(space-4);
}
.c-form-field__hint,
.c-form-field__error {
@include font-scale(level-1, $font-secondary, regular);
}
.c-form-field__hint {
margin-top: spacing(space-4);
color: useHSL(--primary-100);
}
.c-form-field__error {
color: useHSL(--accent-100);
}
No notes defined.