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

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

With Label

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

Left Aligned Label

Notifications on
<x-switch-toggle name="with-label-left-demo"
                 label="Notifications on"


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" />
    <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" />
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 name="onIcon">
        <x-heroicon-s-check class="w-3 h-3 text-blue-600" />