{% set form_children %}
{% set fieldset_children %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Email input type',
displayType: 'floating',
attributes: {
for: 'email',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter email',
type: 'email',
id: 'email',
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Password input type',
displayType: 'floating',
attributes: {
for: 'password',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter password',
type: 'password',
id: 'password',
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% include '@bolt-components-form/form-fieldset.twig' with {
legendTitle: 'Account Info',
children: fieldset_children,
} only %}
{% set fieldset_children %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Text input type',
displayType: 'floating',
attributes: {
for: 'text',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter text',
type: 'text',
id: 'text',
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'URL input type',
displayType: 'floating',
attributes: {
for: 'url',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter URL',
type: 'url',
id: 'url',
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Telephone input type',
displayType: 'floating',
attributes: {
for: 'tel',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter telephone number',
type: 'tel',
id: 'tel',
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% set icon_info_circle %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'info-circle',
} only %}
{% endset %}
{% set icon_warning %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'warning',
} only %}
{% endset %}
{% include '@bolt-components-form/form-fieldset.twig' with {
legendTitle: 'Personal Info',
children: fieldset_children,
descriptionText: icon_info_circle ~ '<small>Helper text for this specific fieldset.</small>',
errors: icon_warning ~ ' This is an error message for this specific fieldset.'
} only %}
{% endset %}
{% include '@bolt-components-form/form.twig' with {
children: form_children
} only %}