Single select

Native 

  •         {% include "@Components/fields/single-select-field/single-select-field.twig" with {props: {
  native: true,
  name: "ordering",
  label: "řadit od:",
  options: [
    {
      label: "Nejlevnější",
      value: "chapest",
      selected: true,
    },
    {
      label: "Nejdražší",
      value: "expensive",
    },
    {
      label: "Nejnovější",
      value: "new",
    },
  ]
}} %}

      
  •           

  <div class="f-single-select d-flex flex-column gap-1 u-posr --native">

      <label class="f-label d-flex align-items-center mb-0 u-fz-md  --active">
  řadit od:
</label>
  
  <div class="f-single-select__wrap">
    <select class="f-single-select__select" name=ordering>
              <option class="" selected value="chapest">Nejlevnější</option>
              <option class="" value="expensive">Nejdražší</option>
              <option class="" value="new">Nejnovější</option>
          </select>
  </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>

Slim select 

  •         {% include "@Components/fields/single-select-field/single-select-field.twig" with {props: {
  name: "another-order",
  label: "řadit od:",
  options: [
    {
      title: "Nejlevnější",
      value: "chapest",
      selected: true,
    },
    {
      title: "Nejdražší",
      value: "expensive",
    },
    {
      title: "Nejnovější",
      value: "new",
    },
  ]
}} %}

      
  •           

  <div class="f-single-select d-flex flex-column gap-1 u-posr --native">

      <label class="f-label d-flex align-items-center mb-0 u-fz-md  --active">
  řadit od:
</label>
  
  <div class="f-single-select__wrap">
    <select class="f-single-select__select slim-select" name=another-order>
              <option class="" selected value="chapest"></option>
              <option class="" value="expensive"></option>
              <option class="" value="new"></option>
          </select>
  </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>