🤹
TALL Stack Tips
  • What is TALL Stack
  • Tailwind
    • Tailwind Resources
    • Swinging Bell Notification Icon
    • Styled Unordered Lists
  • Alpine
  • Alpine Resources
  • Tabbed Content Using Alpine JS
  • Checkbox component with SVG tick
  • Dropdown animation
  • Create a Sliding Puzzle Captcha
  • Laravel
    • Tabler Icons Component
    • Password-less Login with Laravel 8+
    • Password-less Login with Magic Link in Laravel 8
    • Laravel Resources
    • Laravel Breeze Login Conditional Redirect
    • Jetstream Login Conditional Redirect
    • Simplify Laravel CRUD Controllers
    • CSRF and expired login forms
    • CSRF and expired logout forms
    • Add your own logo to Laravel Mail
    • Specify a different mail theme for Notifications
    • Show custom page when email verification link expired
    • Using a mutator to save currency
    • Using Spatie Valuestore to hold frequently accessed settings
    • Using the old() helper
    • Alternatives to using Eloquent Accessor
    • UpdateOrCreate may not update timestamp
    • Use of lockForUpdate()
    • Using S3
    • Super Simple User Based Feature Flags
    • Installing a Specific Version of Laravel
    • Versioning your Laravel Project
    • CSS Cache Busting with your Git Commit SHA
    • Adding column to Database Notifications table
    • Find nearby locations using the Haversine formula in Eloquent query
    • Using Queues on Shared Hosting with Laravel
    • Create Guaranteed Unique Invoice Number in Laravel
    • Send Notification to all team members
    • Protect Staging site with Basic Auth
    • Working with Enums
    • PHP DateTime formatting cribsheet
  • Livewire
    • Livewire Resources
    • Naming Livewire Components
    • Dynamic Cascading Dropdown with Livewire
    • Hiding a button after click
    • Working with Javascript Components
    • SweetAlert2 with Livewire
    • Select Multiple or Checkboxes
    • Clearing checkboxes in Livewire
    • Livewire File Uploads Using S3
    • Simple Log File Viewer
  • Related Resources
    • Testing resources
    • When Composer runs out of memory
    • Deployment
    • Security
    • Scheduler & Cron tips
    • LastPass tips
    • Using Git
    • VSCode Tips
    • Markdown
    • Cpanel resources
Powered by GitBook
On this page

Was this helpful?

Checkbox component with SVG tick

Styling a checkbox by swapping out SVGs

PreviousTabbed Content Using Alpine JSNextDropdown animation

Last updated 4 years ago

Was this helpful?

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.

@props(['label', 'name'])
<div class="flex items-center text-left" x-data="{checked: document.getElementById('{{ $name }}').checked}" >
    <div class="w-4/12"></div>
    <label class="w-8/12 pr-8 font-bold text-gray-100 cursor-pointer" for="{{ $name }}"
        x-on:click="checked = document.getElementById('{{ $name }}').checked" 
    >
        <x-svg.circle class="w-6" x-show="!checked"/>
        <x-svg.circle-check class="w-6" x-show="checked" x-cloak/>
        <input class="hidden mr-3" name="{{ $name }}" type="checkbox" id="{{ $name }}"/>
        <span>{!! $label !!}</span>
    </label>
</div>

Using x-on:click in the checkbox label updates the status of the checked Alpine attribute whenever the state of the checkbox changes.

The component is included in the view with name and label props;

<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=""  />

The icons used were imported from Steve Schoger's heroicons and converted to Laravel 7 components. Check out 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 tags adding to ensure accessibility.

https://heroicons.dev/
ARIA