Checkbox component with SVG tick

The effect illustrated here, uses x-show to switch between two different SVGs, one being a circle and one being a circle with a check mark inside.
1
@props(['label', 'name'])
2
<div class="flex items-center text-left" x-data="{checked: document.getElementById('{{ $name }}').checked}" >
3
    <div class="w-4/12"></div>
4
    <label class="w-8/12 pr-8 font-bold text-gray-100 cursor-pointer" for="{{ $name }}"
5
        x-on:click="checked = document.getElementById('{{ $name }}').checked" 
6
    >
7
        <x-svg.circle class="w-6" x-show="!checked"/>
8
        <x-svg.circle-check class="w-6" x-show="checked" x-cloak/>
9
        <input class="hidden mr-3" name="{{ $name }}" type="checkbox" id="{{ $name }}"/>
10
        <span>{!! $label !!}</span>
11
    </label>
12
</div>
Copied!
Using x-on:click in the checkbox label updates the status of the checked Alpine attribute whenever the state of the checkbox changes.
The icons used were imported from Steve Schoger's heroicons and converted to Laravel 7 components. Check out https://heroicons.dev/ for an easy way to find and copy the SVG you need.  The empty circle was created by taking one of the other circular icons and deleting one of the paths. 
The actual checkbox input is hidden, but remains in sync. The technique needs some ARIA tags adding to ensure accessibility.
The component is included in the view with name and label props;
1
<x-inputs.checkbox name="terms" label="I Accept the Terms and Conditions <a class='text-teal-400 underline hover:text-teal-200' target='_blank' href='/terms-condition'>here</a>" class=""  />
Copied!

Tabbed Content Using Alpine JS

Dropdown animation

Last modified 1yr ago

Copy link