Toggle - Laravel Blade

Use the toggle component to switch between two states such as on/off or enabled/disabled, with support for sizes, colors, and disabled state.

Default Toggle

Blade code

<div class="space-y-4">
    <x-fwb.toggle label="Toggle me" />
    <x-fwb.toggle label="Checked toggle" :checked="true" />
</div>

Checked State

Blade code

<x-fwb.toggle label="Enabled" :checked="true" />

Disabled State

Blade code

<div class="space-y-4">
    <x-fwb.toggle label="Disabled toggle" :disabled="true" />
    <x-fwb.toggle label="Disabled checked" :disabled="true" :checked="true" />
</div>

Colors

Blade code

<div class="space-y-4">
    <x-fwb.toggle label="Blue" color="blue" :checked="true" />
    <x-fwb.toggle label="Red" color="red" :checked="true" />
    <x-fwb.toggle label="Green" color="green" :checked="true" />
    <x-fwb.toggle label="Purple" color="purple" :checked="true" />
    <x-fwb.toggle label="Yellow" color="yellow" :checked="true" />
    <x-fwb.toggle label="Teal" color="teal" :checked="true" />
    <x-fwb.toggle label="Orange" color="orange" :checked="true" />
</div>

Sizes

Blade code

<div class="space-y-4">
    <x-fwb.toggle label="Small toggle" size="sm" :checked="true" />
    <x-fwb.toggle label="Default toggle" size="md" :checked="true" />
    <x-fwb.toggle label="Large toggle" size="lg" :checked="true" />
</div>

Toggle Card

Email notifications

Receive email updates about your account activity.

Blade code

<div class="max-w-md">
    <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg dark:border-gray-700">
        <div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Email notifications</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Receive email updates about your account activity.</p>
        </div>
        <x-fwb.toggle :checked="true" />
    </div>
</div>

Component Properties

Toggle x-fwb.toggle

Prop Type Default Description
id string auto Unique identifier for the toggle. Auto-generated if not provided.
label string|null null Label text displayed next to the toggle.
checked bool false Set the toggle to be on by default.
disabled bool false Disable the toggle.
required bool false Mark the toggle as required.
color string blue Toggle color: blue, red, green, purple, yellow, teal, orange.
size string md Toggle size: sm, md, or lg.