Checks and radios inputs

Checkboxes

Default 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Souhlasím",
  full_name: "agree",
  extra_class: "--js-custom-checkbox",
}} %}

      
  •             <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   --js-custom-checkbox">
  <input class="f-checkbox__input u-posa" type="checkbox" name=agree>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Souhlasím
              
          </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>

</label>

Checked 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Souhlasím",
  full_name: "another-agree",
  checked: true,
}} %}

      
  •               <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox">
  <input class="f-checkbox__input u-posa" type="checkbox" checked="checked" name=another-agree>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Souhlasím
              
          </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>

</label>

Custom content 

  •         {% set title %}
Souhlasíte s našimi
<a href="#">obchodními podmínkami</a>
a potvrzujete, že jste se seznámili se zpracování osobních údajů.
{% endset %}


{% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: title,
  full_name: "agree-custom-title",
  align: "top"
}} %}

      
  •           

  <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-top  --checkbox">
  <input class="f-checkbox__input u-posa" type="checkbox" name=agree-custom-title>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Souhlasíte s našimi
<a href="#">obchodními podmínkami</a>
a potvrzujete, že jste se seznámili se zpracování osobních údajů.

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

</label>

Disabled 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Souhlasím",
  full_name: "disabled-agree",
  checked: true,
  disabled: true,
}} %}

      
  •                 <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox --disabled">
  <input class="f-checkbox__input u-posa" type="checkbox" checked="checked" disabled name=disabled-agree>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Souhlasím
              
          </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>

</label>

With count 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Xbox",
  count: "5",
  full_name: "count",
  checked: true,
}} %}

      
  •               <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox">
  <input class="f-checkbox__input u-posa" type="checkbox" checked="checked" name=count>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Xbox
              
              <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(5)</span>
          </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>

</label>

With description 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Xbox",
  description: "Description of a toggle component",
  full_name: "descripiton",
}} %}

      
  •             <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox">
  <input class="f-checkbox__input u-posa" type="checkbox" name=descripiton>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Xbox
              
          </span>

          <div class="f-checkbox__description flex-shrink-0 u-fz-sm">Description of a toggle component</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>

</label>

Radios

radios are same component with same parameters, but with extra parameter type: "radio"

Checked 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Souhlasím",
  full_name: "prechecked-radio",
  checked: true,
  type: "radio",
}} %}

      
  •               <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --radio">
  <input class="f-checkbox__input u-posa" type="radio" checked="checked" name=prechecked-radio>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Souhlasím
              
          </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>

</label>

Disabled 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Souhlasím",
  full_name: "disabled-radio",
  checked: true,
  disabled: true,
  type: "radio",
}} %}

      
  •                 <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --radio --disabled">
  <input class="f-checkbox__input u-posa" type="radio" checked="checked" disabled name=disabled-radio>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Souhlasím
              
          </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>

</label>

With count 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Playstation",
  count: "5",
  full_name: "radio-count",
  type: "radio",
}} %}

      
  •             <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --radio">
  <input class="f-checkbox__input u-posa" type="radio" name=radio-count>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Playstation
              
              <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(5)</span>
          </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>

</label>

With description 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Xbox",
  description: "Description of a toggle component",
  full_name: "descripiton-radio",
  type: "radio",
}} %}

      
  •             <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --radio">
  <input class="f-checkbox__input u-posa" type="radio" name=descripiton-radio>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Xbox
              
          </span>

          <div class="f-checkbox__description flex-shrink-0 u-fz-sm">Description of a toggle component</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>

</label>

Outline variant 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  variant: "outline",
  label: "Malá",
  count: 20,
  description: "Šířka 10 - 15 cm",
  full_name: "descripiton-radio",
  type: "radio",
}} %}

      
  •             <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center px-2 py-1 u-posr --radio  --outline">
  <input class="f-checkbox__input u-posa" type="radio" name=descripiton-radio>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Malá
              
              <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span>
          </span>

          <div class="f-checkbox__description flex-shrink-0 u-fz-sm">Šířka 10 - 15 cm</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>

</label>

Radio with tooltip 

  •         {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: {
  label: "Malá",
  count: 20,
  description: "Šířka 10 - 15 cm",
  full_name: "descripiton-radio",
  type: "radio",
  align: "center",
  tooltip: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo eos, architecto nam modi natus rerum, non similique consequatur provident omnis beatae aliquid enim assumenda eaque quibusdam iusto fugit quae unde."
}} %}

      
  •             <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --radio">
  <input class="f-checkbox__input u-posa" type="radio" name=descripiton-radio>
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Malá
              
              <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span>
          </span>

          <div class="f-checkbox__description flex-shrink-0 u-fz-sm">Šířka 10 - 15 cm</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">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo eos, architecto nam modi natus rerum, non similique consequatur provident omnis beatae aliquid enim assumenda eaque quibusdam iusto fugit quae unde.
      </div>
</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>

</label>