Toggle button

[Damix48]

I needed a toggle button class, so I made one. It works with both checkbox and radio inputs. Sharing it here in case someone else needs it:

<label class="btn btn-toggle">
  <input type="checkbox" />
  Toggle
</label>

.btn-toggle {
  position: relative;

  & > input:is([type="checkbox"], [type="radio"]) {
    display: none;
  }

  &::after {
    content: "";
    position: absolute;
    max-width: calc(100% - (var(--size) / 2));
    width: 1rem;
    height: 0.2rem;
    background-color: color-mix(in oklab, var(--btn-bg) 50%, #ddd);
    bottom: calc(var(--size) / 8);
    border-radius: var(--radius-field);
  }

  &:has(input:checked)::after {
    background: var(--btn-fg);
  }
}

https://play.tailwindcss.com/J2Yd9uH2pd

[saadeghi]

Amazing 🔥🔥

I would change the color to currentColor with an opacity so it adapts all variants.

[Damix48]

Awesome, currentColor is even better. Thanks

[pdanpdan]

Can you please add link to play with the updated version? I'm curious how it looks

[Damix48]

Sure: https://play.tailwindcss.com/ctywoo0O1I

[pdanpdan]

Nice. Thank you.
Nice idea