<div class="o-input o-form__item">
<label for="date">
Date
</label>
<input id="date" name="date" type="date" placeholder="First & Last Name" />
<span class="o-field-note">
This is a field note.
</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": "date",
"label": "Date",
"type": "date",
"field_note": {
"text": "This is a field note."
},
"attributes": {
"placeholder": "First & Last Name"
}
}
}
Field label and field notes aren’t yet defined in the design system, but they are included here by default.