{% set com_props = {
header: {
title: "Kontaktní údaje",
},
} %}
<form action="">
{% embed "@Components/items/content-toggle-item/content-toggle-item.twig" with {props: {
title: com_props.header.title,
content_tag: "fieldset"
}} %}
{% block content %}
<div class="row">
<div class="col-sm-6">
{% include "@Components/fields/text-field/text-field.twig" with {props: {
label: "First Name",
required: true
}} %}
</div>
</div>
{% endblock %}
{% endembed %}
{% include "@Components/button/button.twig" with {props: {
type: "submit",
tag: "button",
title: "Odeslat",
name: "t-submit",
extra_class: "mt-3"
}} %}
</form>
<form action="">
<div class="i-content-toggle d-flex flex-column gap-3">
<div class="d-flex align-items-center gap-1">
<label class="f-switch u-posr d-inline-flex u-cursor-pointer align-items-center i-content-toggle__header">
<input class="f-switch__input u-posa" type="checkbox">
<span class="f-switch__visual d-inline-flex u-posr">
<span class="icon d-flex align-items-center justify-content-center --colored --white --sm f-switch__icon f-switch__checkmark u-posa">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --colored --white --sm f-switch__icon f-switch__cross u-posa">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg> </span>
</span>
<span class="f-error u-fz-sm gap-1 d-none">
<span class="f-error__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span>
</span>
<span class="f-error__title"></span>
</span>
</label>
</div>
<fieldset class="i-content-toggle__content" disabled>
<div class="row">
<div class="col-sm-6">
<div class="f-text d-flex flex-column gap-1 u-posr">
<div class="f-text__wrap d-flex align-items-center u-posr">
<label class="f-label d-flex align-items-center mb-0 u-fz-md --required">
First Name
</label>
<input class="f-base f-text__input" type="text" required>
<span class="icon d-flex align-items-center justify-content-center --colored --danger f-text__invalid-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.026 15A7.034 7.034 0 0 1 1 7.974c.33-9.3 13.724-9.297 14.053 0A7.034 7.034 0 0 1 8.026 15Zm0-12.296c-6.964.221-6.963 10.319 0 10.54 6.964-.222 6.964-10.32 0-10.54Zm.879 1.756H7.148v4.392h1.757V4.46Zm0 5.27H7.148v1.757h1.757V9.73Z"/></svg> </span>
</div>
<span class="f-error u-fz-sm gap-1 d-none">
<span class="f-error__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span>
</span>
<span class="f-error__title"></span>
</span>
</div>
</div>
</div>
</fieldset>
</div>
<button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary t-submit mt-3" type="submit" aria-label="Odeslat" name=t-submit>
<span class="btn__title u-z-index-1">
Odeslat
</span>
</button>
</form>