Tailwind - checkbox as switch using two svg icons

Question

I need a little help with toggle switch. Can't find any example and also can't figure it out how it could be done.

There are plenty toggle switches examples, but I need such for "asc / desc" option that my checkbox provides.

Checkbox and two svgs with arrows up and down - where one is visible for unchecked box, and second one for checked in the same place.

This is something what I'm starting with

<script src="https://cdn.tailwindcss.com"></script>
<div>
  <input id="orderasc" name="orderasc" type="checkbox" value="false" onclick="searchType()" class="peer" />
  <label for="orderasc" class="">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="#0d9488"
          class="size-12"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m4.5 15.75 7.5-7.5 7.5 7.5"
          />
        </svg>
      </label>
  <label for="orderasc" class="">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="#0d9488"
          class="size-12"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m19.5 8.25-7.5 7.5-7.5-7.5"
          />
        </svg>
      </label>
</div>

Thank you for your help

Was already "googling" alot and tried to "rework" other examples but with no success. I think thre is an easy solution for that, but I'm not that much experienced to make it that way.

Answer 1

You could consider applying display: none to the appropriate <label> element dependent on whether the <input> element is checked or not to hide the <label> that we don't want to show.

We can use the :checked CSS pseudo-class to match when the <input> element is checked or not. We can use the peer-checked: Tailwind variant on the <label> elements to apply the utility classes conditionally depending on the preceding <input> element that already has the peer class on it:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div>
  <input
    id="orderasc"
    name="orderasc"
    type="checkbox"
    value="false"
    onclick="searchType()"
    class="peer"
  />
  <label for="orderasc" class="hidden peer-checked:block">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="#0d9488"
      class="size-12"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
    </svg>
  </label>
  <label for="orderasc" class="peer-checked:hidden">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="#0d9488"
      class="size-12"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
    </svg>
  </label>
</div>