Search code examples
tailwind-csslaravel-livewire

How to add text in left from styled checkbox?

On TALL site basing on https://dev.to/mvpopuk/create-a-toggle-switch-in-laravel-with-livewire-tailwind-4d3i example I try to add text at left from the styled checkbox with code like :

<div
    class="relative w-10 mr-2 align-middle select-none transition duration-200 ease-in block-inline flex flex-column">
    <div class="whitespace-nowrap mr-64 relative">checkState:</div>
    <input wire:model.live="checkState" type="checkbox" name="checkState" id="checkState"
           class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
    <label for="checkState"
           class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
...
<style>

    .toggle-checkbox:checked {
        @apply: right-0 border-green-400;
        right: 0;
        border-color: #68D391;
    }
    .toggle-checkbox:checked + .toggle-label {
        @apply: bg-green-600;
        background-color: #68D391;
    }

</style>

How it looks in Off state:

enter image description here

and in state On :

enter image description here

So I need :

a) To have "checkState:" text from left of the check box. I tried to make it with class mr-64, but failed
b) checkbox style lost 2 states in width, Need to restore it

What have I to change ?

"laravel/framework": "^10.48.7",
"tailwindcss": "^3.4.1",
"livewire/livewire": "^3.4.10",
Solution

  • Here is a simple solution, just use flex :

    <div class="flex"> 
   <span class="mr-2">checkState : </span> 
   <div class="relative inline-block w-10 mr-2 align-middle select-none 
        transition duration-200 ease-in"> 
     <input type="checkbox" wire:model.live="checkState" name="toggle" 
     id="toggle" class="toggle-checkbox absolute block w-6 h-6 
     rounded-full bg-white border-4 appearance-none cursor-pointer"/> 
     <label for="toggle" class="toggle-label block overflow-hidden h-6 
     rounded-full bg-gray-300 cursor-pointer"></label> 
   </div> 
</div>