<div class="o-input is-error o-form__item">
<label for="input-name">
Label
</label>
<input id="input-name" name="input-name" type="text" placeholder="First & Last Name" />
<span class="o-notification">
<span class="o-notification__icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 23C18.3 23 23 18.3 23 12.5C23 6.7 18.3 2 12.5 2C6.7 2 2 6.7 2 12.5C2 18.3 6.7 23 12.5 23ZM12.5 18.7C11.67 18.7 11 18.03 11 17.2C11 16.37 11.67 15.7 12.5 15.7C13.33 15.7 14 16.37 14 17.2C14 18.03 13.33 18.7 12.5 18.7ZM11.5 6.25H13.5L14.24 7.11L13.24 13.86H11.76L10.76 7.11L11.5 6.25Z" />
</svg>
</span>
This is an error message.
</span>
</div>
{% set base_class = input.base_class|default('o-input') %}
{% if input.name and input.type %}
<div class="{{ bem(base_class, input.element, input.modifiers, input.extra) }}{{ input.error ? ' is-error' }}{{ input.attributes.disabled ? ' is-disabled' }} o-form__item" {{ attributes(input.container.attributes) }}>
{% if input.label %}
<label for="{{ input.name }}"{{ input.label_hidden ? ' class="is-visually-hidden"' }}>
{{ input.label }}
{% if input.attributes.required %}
<span class="o-asterisk">*</span>
{% endif %}
</label>
{% endif %}
<input id="{{ input.name }}" name="{{ input.name }}" type="{{ input.type }}" {{ attributes(input.attributes) }}/>
{% include "@field-note" with input %}
{% include "@notification" with input %}
</div>
{% endif %}
{
"input": {
"name": "input-name",
"label": "Label",
"type": "text",
"field_note": false,
"attributes": {
"placeholder": "First & Last Name"
},
"error": true,
"notification": {
"text": "This is an error message."
}
}
}
Field label and field notes aren’t yet defined in the design system, but they are included here by default.