Forms
Form example.
{#
This is an example and should not be used as it is.
#}
{% embed '@ecl/ec-component-form-form' with {} only %}
{% block form %}
{% embed '@ecl/ec-component-form-fieldset' with {} only %}
{% block fieldset %}
{% include '@ecl/ec-component-form-legend' with { 'extra_classes': 'ecl-form-legend--level-1', 'content': 'Personal information' } only %}
{% embed '@ecl/ec-component-form-form-group' with {} only %}
{% block form_group %}
{% include '@ecl/ec-component-form-label' with { 'for_attribute': 'field-ID-1', 'label': 'First name' } only %}
{% include '@ecl/ec-component-form-text-input' with {
'id' : 'field-ID-1',
'name': 'field-name-1',
'type': 'text',
'extra_attributes': [
{ 'name': 'placeholder', 'value': 'Some placeholder text.' }
]
} only %}
{% endblock %}
{% endembed %}
{% embed '@ecl/ec-component-form-form-group' with {} only %}
{% block form_group %}
{% include '@ecl/ec-component-form-label' with { 'for_attribute': 'field-ID-2', 'label': 'Last name' } only %}
{% include '@ecl/ec-component-form-text-input' with {
'id' : 'field-ID-2',
'name': 'field-name-2',
'type': 'text',
'extra_attributes': [
{ 'name': 'placeholder', 'value': 'Some placeholder text.' }
]
} only %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% embed '@ecl/ec-component-form-fieldset' with {} only %}
{% block fieldset %}
{% include '@ecl/ec-component-form-legend' with { 'extra_classes': 'ecl-form-legend--level-1', 'content': 'Group' } only %}
{% embed '@ecl/ec-component-form-fieldset' with {} only %}
{% block fieldset %}
{% include '@ecl/ec-component-form-legend' with { 'extra_classes': 'ecl-form-legend--level-2', 'content': 'Subgroup 1' } only %}
{% embed '@ecl/ec-component-form-form-group' with {} only %}
{% block form_group %}
{% include '@ecl/ec-component-form-label' with { 'for_attribute': 'field-ID-3', 'label': 'Text Input - disabled' } only %}
{% include '@ecl/ec-component-form-help-block' with { 'content': 'This is some placeholder help text', 'is_disabled': true } only %}
{% include '@ecl/ec-component-form-text-input' with {
'id' : 'field-ID-3',
'name': 'field-name-3',
'type': 'text',
'is_disabled': true,
'extra_attributes': [
{ 'name': 'placeholder', 'value': 'Some placeholder text.' }
]
} only %}
{% endblock %}
{% endembed %}
{% embed '@ecl/ec-component-form-form-group' with {} only %}
{% block form_group %}
{% include '@ecl/ec-component-form-label' with { 'for_attribute': 'field-ID-4', 'label': 'Text Input - error on a field' } only %}
{% include '@ecl/ec-component-form-help-block' with { 'content': 'This is some placeholder help text', 'has_error': true } only %}
{% include '@ecl/ec-component-form-text-input' with {
'id' : 'field-ID-4',
'name': 'field-name-4',
'type': 'text',
'has_error': true,
'extra_attributes': [
{ 'name': 'placeholder', 'value': 'Some placeholder text.' }
]
} only %}
{% include '@ecl/ec-component-form-feedback-message' with {
'title': 'Some feedback message',
'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis',
'has_error': true
} only %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% embed '@ecl/ec-component-form-fieldset' with {} only %}
{% block fieldset %}
{% include '@ecl/ec-component-form-legend' with { 'extra_classes': 'ecl-form-legend--level-2', 'content': 'Subgroup 2' } only %}
{% embed '@ecl/ec-component-form-form-group' with {} only %}
{% block form_group %}
{% include '@ecl/ec-component-form-label' with { 'for_attribute': 'field-ID-5', 'label': 'Text Input - disabled' } only %}
{% include '@ecl/ec-component-form-help-block' with { 'content': 'This is some placeholder help text', 'is_disabled': true } only %}
{% include '@ecl/ec-component-form-text-input' with {
'id' : 'field-ID-5',
'name': 'field-name-5',
'type': 'text',
'is_disabled': true,
'extra_attributes': [
{ 'name': 'placeholder', 'value': 'Some placeholder text.' }
]
} only %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
/* No context defined for this component. */
<form class="ecl-form">
<fieldset class="ecl-fieldset">
<legend class="ecl-form-legend ecl-form-legend--level-1">Personal information</legend>
<div class="ecl-form-group">
<label class="ecl-form-label" for="field-ID-1">First name</label>
<input type="text" class="ecl-text-input" id="field-ID-1" name="field-name-1" placeholder="Some placeholder text." />
</div>
<div class="ecl-form-group">
<label class="ecl-form-label" for="field-ID-2">Last name</label>
<input type="text" class="ecl-text-input" id="field-ID-2" name="field-name-2" placeholder="Some placeholder text." />
</div>
</fieldset>
<fieldset class="ecl-fieldset">
<legend class="ecl-form-legend ecl-form-legend--level-1">Group</legend>
<fieldset class="ecl-fieldset">
<legend class="ecl-form-legend ecl-form-legend--level-2">Subgroup 1</legend>
<div class="ecl-form-group">
<label class="ecl-form-label" for="field-ID-3">Text Input - disabled</label>
<p class="ecl-help-block ecl-help-block--disabled">This is some placeholder help text</p>
<input type="text" class="ecl-text-input" id="field-ID-3" name="field-name-3" disabled placeholder="Some placeholder text." />
</div>
<div class="ecl-form-group">
<label class="ecl-form-label" for="field-ID-4">Text Input - error on a field</label>
<p class="ecl-help-block ecl-help-block--has-error">This is some placeholder help text</p>
<input type="text" class="ecl-text-input ecl-text-input--has-error" id="field-ID-4" name="field-name-4" placeholder="Some placeholder text." />
<div class="ecl-feedback-message ecl-feedback-message--error" role="alert">
<div class="ecl-feedback-message__title" role="heading" aria-level="4">Some feedback message</div>
<p class="ecl-feedback-message__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis</p>
</div>
</div>
</fieldset>
<fieldset class="ecl-fieldset">
<legend class="ecl-form-legend ecl-form-legend--level-2">Subgroup 2</legend>
<div class="ecl-form-group">
<label class="ecl-form-label" for="field-ID-5">Text Input - disabled</label>
<p class="ecl-help-block ecl-help-block--disabled">This is some placeholder help text</p>
<input type="text" class="ecl-text-input" id="field-ID-5" name="field-name-5" disabled placeholder="Some placeholder text." />
</div>
</fieldset>
</fieldset>
</form>
- Handle: @ecl/ec-template-form
- Tags: template
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-template/ec-template-form/ec-template-form.twig