Laravel Form Components
Docs

Demo: Switch Toggle

The switch toggle component offers an alternative to a traditional checkbox and is heavily based on the Tailwind UI toggle component.

Basic Usage

Source 
<x-switch-toggle name="basic-usage-demo" />

With Label

Source
Notifications on 
<x-switch-toggle name="with-label-demo"
                 label="Notifications on"
/>

Left Aligned Label

Source
Notifications on 
<x-switch-toggle name="with-label-left-demo"
                 label="Notifications on"
                 label-position="left"
/>

Variations

Source
Short Toggle - Default
Short Toggle - Lg
Simple Toggle - Sm
Simple Toggle - Default
Simple Toggle - Lg 
<div class="sm:max-w-md space-y-4">
    <x-switch-toggle label="Short Toggle - Default" short />
    <x-switch-toggle label="Short Toggle - Lg" short size="lg" />
    <hr>
    <x-switch-toggle label="Simple Toggle - Sm" size="sm" />
    <x-switch-toggle label="Simple Toggle - Default" />
    <x-switch-toggle label="Simple Toggle - Lg" size="lg" />
</div>

Icons

Source
With Custom On/Off Icons 
<x-switch-toggle label="With Custom On/Off Icons">
    <x-slot name="offIcon">
        <x-heroicon-s-x class="w-3 h-3 text-gray-400" />
    </x-slot>

    <x-slot name="onIcon">
        <x-heroicon-s-check class="w-3 h-3 text-blue-600" />
    </x-slot>
</x-switch-toggle>