Input

Default type text 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "First Name",
}} %}

      
  •           <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">
  First Name
</label>
    
    <input class="f-base f-text__input" type="text">

    
    
    
      
  <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>

Phone 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "Phone type",
  type: "tel",
}} %}

      
  •           <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">
  Phone type
</label>
    
    <input class="f-base f-text__input" type="tel">

    
    
    
      
  <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>

Password 

  •         {% 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>

Email 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "Email type",
  type: "email",
}} %}

      
  •           <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">
  Email type
</label>
    
    <input class="f-base f-text__input" type="email">

    
    
    
      
  <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>

Url 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "Url type",
  type: "url",
}} %}

      
  •           <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">
  Url type
</label>
    
    <input class="f-base f-text__input" type="url">

    
    
    
      
  <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>

Search 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "Search type",
  type: "search",
}} %}

      
  •           <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">
  Search type
</label>
    
    <input class="f-base f-text__input" type="search">

    
    
    
      
  <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>

Required 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "Required",
  required: true,
}} %}

      
  •           <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">
  Required
</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>

Without label 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {}} %}

      
  •           <div class="f-text d-flex flex-column gap-1 u-posr">

  <div class="f-text__wrap d-flex align-items-center u-posr">

    
    
    <input class="f-base f-text__input" type="text">

    
    
    
      
  <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>

Placeholder 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "With Placeholder",
  placeholder: "Enter your first name",
}} %}

      
  •           <div class="f-text d-flex flex-column gap-1 u-posr      --active">

  <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  --active">
  With Placeholder
</label>
    
    <input class="f-base f-text__input" type="text" placeholder="Enter your first name">

    
    
    
      
  <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>

Value 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "With value",
  value: "prefilled value",
}} %}

      
  •           <div class="f-text d-flex flex-column gap-1 u-posr      --active">

  <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  --active">
  With value
</label>
    
    <input class="f-base f-text__input" type="text" value="prefilled value">

    
    
    
      
  <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>

Icon left 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "With icon left",
  placeholder: "icon have settable color by needs",
  icon_before: {
    src: "@Images/svg/magnifier.svg",
    color: "primary",
  },
}} %}

      
  •           <div class="f-text d-flex flex-column gap-1 u-posr  --icon-before    --active">

  <div class="f-text__wrap d-flex align-items-center u-posr">

          <span class="f-text__icon --before">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --primary">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7l126.6 126.7c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>      </span>
      </span>

    
          <label class="f-label d-flex align-items-center mb-0 u-fz-md  --active">
  With icon left
</label>
    
    <input class="f-base f-text__input" type="text" placeholder="icon have settable color by needs">

    
    
    
      
  <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>

Icon right 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "With icon right",
  placeholder: "icon have settable color by needs",
  icon_after: {
    src: "@Images/svg/clock.svg",
    color: "primary",
  }
}} %}

      
  •           <div class="f-text d-flex flex-column gap-1 u-posr   --icon-after   --active">

  <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  --active">
  With icon right
</label>
    
    <input class="f-base f-text__input" type="text" placeholder="icon have settable color by needs">

          <span class="f-text__icon --after">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --primary">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
      </span>
    
    
    
      
  <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>

Icon on both sides 

  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "Input with icon on both sides",
  placeholder: "Icons have settable color",
  icon_before: {
    src: "@Images/svg/magnifier.svg",
    color: "text",
  },
  icon_after: {
    src: "@Images/svg/clock.svg",
    color: "text",
  }
}} %}

      
  •           <div class="f-text d-flex flex-column gap-1 u-posr  --icon-before --icon-after   --active">

  <div class="f-text__wrap d-flex align-items-center u-posr">

          <span class="f-text__icon --before">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7l126.6 126.7c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>      </span>
      </span>

    
          <label class="f-label d-flex align-items-center mb-0 u-fz-md  --active">
  Input with icon on both sides
</label>
    
    <input class="f-base f-text__input" type="text" placeholder="Icons have settable color">

          <span class="f-text__icon --after">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
      </span>
    
    
    
      
  <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>

Field with tooltip

  • E-mail nebude zveřejněn, slouží jen pro upozornění na nové recenze produktu. 
  •         {% include "@Components/fields/text-field/text-field.twig" with {props: {
  label: "First Name",
  tooltip: "E-mail nebude zveřejněn, slouží jen pro upozornění na nové recenze produktu.",
}} %}

      
  •           <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">
  First Name
</label>
    
    <input class="f-base f-text__input" type="text">

    
    
    
      
  <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>

      <div class="i-tooltip">
    
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm  i-tooltip__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 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg>      </span>

  
  <div class="i-tooltip__content d-none u-fz-14 u-fw-400 u-lh-20">
          E-mail nebude zveřejněn, slouží jen pro upozornění na nové recenze produktu.
      </div>
</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>