{% include "@Components/fields/text-field/text-field.twig" with {props: {
label: "Password type",
type: "password",
}} %}
<div class="f-text d-flex flex-column gap-1 u-posr --password">
<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">
Password type
</label>
<input class="f-base f-text__input" type="password">
<div class="f-text__toggle u-posa u-translate-middle-y u-top-50-p justify-content-center align-center d-grid u-cursor-pointer">
<span class="icon d-flex align-items-center justify-content-center f-text__toggle-icon --on">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 0 0-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 0 0 0-17.47C428.89 172.28 347.8 112 255.66 112z"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg> </span>
<span class="icon d-flex align-items-center justify-content-center f-text__toggle-icon --off">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M432 448a15.92 15.92 0 0 1-11.31-4.69l-352-352a16 16 0 0 1 22.62-22.62l352 352A16 16 0 0 1 432 448zm-176.34-64c-41.49 0-81.5-12.28-118.92-36.5-34.07-22-64.74-53.51-88.7-91v-.08c19.94-28.57 41.78-52.73 65.24-72.21a2 2 0 0 0 .14-2.94L93.5 161.38a2 2 0 0 0-2.71-.12c-24.92 21-48.05 46.76-69.08 76.92a31.92 31.92 0 0 0-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416a239.13 239.13 0 0 0 75.8-12.58 2 2 0 0 0 .77-3.31l-21.58-21.58a4 4 0 0 0-3.83-1 204.8 204.8 0 0 1-51.16 6.47zm235.18-145.4c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96a227.34 227.34 0 0 0-74.89 12.83 2 2 0 0 0-.75 3.31l21.55 21.55a4 4 0 0 0 3.88 1 192.82 192.82 0 0 1 50.21-6.69c40.69 0 80.58 12.43 118.55 37 34.71 22.4 65.74 53.88 89.76 91a.13.13 0 0 1 0 .16 310.72 310.72 0 0 1-64.12 72.73 2 2 0 0 0-.15 2.95l19.9 19.89a2 2 0 0 0 2.7.13 343.49 343.49 0 0 0 68.64-78.48 32.2 32.2 0 0 0-.1-34.78z"/><path d="M256 160a95.88 95.88 0 0 0-21.37 2.4 2 2 0 0 0-1 3.38l112.59 112.56a2 2 0 0 0 3.38-1A96 96 0 0 0 256 160zm-90.22 73.66a2 2 0 0 0-3.38 1 96 96 0 0 0 115 115 2 2 0 0 0 1-3.38z"/></svg> </span>
</div>
<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>