blatui

Components

Switch

A control that allows the user to toggle between an on and off state.

php artisan blatui:add switch 
<div class="flex items-center gap-2">
    <x-ui.switch id="airplane-mode" />
    <x-ui.label for="airplane-mode">Airplane Mode</x-ui.label>
</div>

Colors

{{-- Recolour the checked state with any background utility. --}}
<div class="flex items-center gap-6">
    <x-ui.switch checked aria-label="Green" class="data-[state=checked]:bg-green-600 dark:data-[state=checked]:bg-green-500" />
    <x-ui.switch checked aria-label="Sky" class="data-[state=checked]:bg-sky-600 dark:data-[state=checked]:bg-sky-500" />
    <x-ui.switch checked aria-label="Amber" class="data-[state=checked]:bg-amber-500 dark:data-[state=checked]:bg-amber-400" />
    <x-ui.switch checked aria-label="Red" class="data-[state=checked]:bg-destructive" />
</div>

Disabled

<div class="flex flex-col gap-3">
    <div class="flex items-center gap-2">
        <x-ui.switch id="sw-off-disabled" disabled />
        <x-ui.label for="sw-off-disabled">Airplane Mode</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.switch id="sw-on-disabled" checked disabled />
        <x-ui.label for="sw-on-disabled">Do Not Disturb</x-ui.label>
    </div>
</div>

Settings

<div class="flex w-full max-w-sm flex-col gap-4">
    <div class="flex items-center justify-between gap-4">
        <x-ui.label for="set-2fa">Two-factor authentication</x-ui.label>
        <x-ui.switch id="set-2fa" checked />
    </div>
    <div class="flex items-center justify-between gap-4">
        <x-ui.label for="set-activity">Activity digest</x-ui.label>
        <x-ui.switch id="set-activity" />
    </div>
    <div class="flex items-center justify-between gap-4">
        <x-ui.label for="set-public">Public profile</x-ui.label>
        <x-ui.switch id="set-public" checked />
    </div>
</div>

Sizes

{{-- Three preset sizes via the `size` prop. --}}
<div class="flex items-center gap-6">
    <x-ui.switch size="sm" checked aria-label="Small" />
    <x-ui.switch size="default" checked aria-label="Default" />
    <x-ui.switch size="lg" checked aria-label="Large" />
</div>

With Icons

{{-- Feature rows: a leading icon + label paired with a switch. --}}
<div class="flex w-full max-w-sm flex-col gap-4">
    <label for="sw-sync" class="flex items-center justify-between gap-4">
        <span class="flex items-center gap-3">
            <x-lucide-database class="text-muted-foreground size-5" />
            <span class="flex flex-col">
                <span class="text-sm font-medium">Sync data</span>
                <span class="text-muted-foreground text-xs">Keep records up to date across devices.</span>
            </span>
        </span>
        <x-ui.switch id="sw-sync" checked />
    </label>

    <label for="sw-theme" class="flex items-center justify-between gap-4">
        <span class="flex items-center gap-3">
            <x-lucide-palette class="text-muted-foreground size-5" />
            <span class="flex flex-col">
                <span class="text-sm font-medium">Auto theme</span>
                <span class="text-muted-foreground text-xs">Match the system light / dark setting.</span>
            </span>
        </span>
        <x-ui.switch id="sw-theme" />
    </label>

    <label for="sw-ai" class="flex items-center justify-between gap-4">
        <span class="flex items-center gap-3">
            <x-lucide-sparkles class="text-muted-foreground size-5" />
            <span class="flex flex-col">
                <span class="text-sm font-medium">AI suggestions</span>
                <span class="text-muted-foreground text-xs">Surface smart recommendations as you work.</span>
            </span>
        </span>
        <x-ui.switch id="sw-ai" checked />
    </label>
</div>

With Text

Receive emails about new products, features, and more.

<x-ui.field orientation="horizontal" class="w-full max-w-sm rounded-lg border p-4">
    <x-ui.field-content>
        <x-ui.field-label for="sw-marketing">Marketing emails</x-ui.field-label>
        <x-ui.field-description>Receive emails about new products, features, and more.</x-ui.field-description>
    </x-ui.field-content>
    <x-ui.switch id="sw-marketing" checked />
</x-ui.field>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public bool $notify = true;

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.switch wire:model="notify" />

API Reference

Props, slots and exposed methods for <x-ui.switch>.

Props

Prop Type Default Description
name string — Form field name. When set and the switch is on, a hidden input submits the value; when off, nothing is submitted.
value string 'on' The value submitted under name when the switch is checked.
checked bool false Whether the switch starts in the on (checked) state.
disabled bool false Disables the switch so it cannot be toggled.
size string 'default' Track and thumb size of the switch.
sm default lg
id string — DOM id for the switch button, useful to pair with a label's for attribute.