Switch

Toggle a setting on or off, suitable for binary options like enabling or disabling features, with the trigger activated by clicking either the label or the switch, and also by pressing the spacebar or enter key.

Use switches for auto-saving controls outside forms, and checkboxes for standard form inputs.

Enable notifications

<x-switch wire:model.live="notifications" label="Enable notifications" />

With description

Align descriptions for each switch directly below its label.

Newsletter

Receive our monthly newsletter with the latest updates and offers.

<x-switch checked label="Newsletter" description="Receive our monthly newsletter with the latest updates and offers." />

With badge

Add a badge to a switch to highlight its status or importance.

Terms and conditions

Required

Read and agree to the terms and conditions.

Terms and conditions

Not Optional

Read and agree to the terms and conditions.

<x-switch id="Terms 1" label="Terms and conditions" required
    description="Read and agree to the terms and conditions." />
<x-switch id="Terms 2" label="Terms and conditions" badge="Not Optional" badge-color="red"
    description="Read and agree to the terms and conditions." />

If multiple switches share the same


    label

and


    wire:model

, ensure they have unique IDs by providing the

id

prop explicitly.

Checked

Mark a switch as checked by default.

Enable notifications

<x-switch checked />

Disabled

Prevent users from interacting with and modifying a switch.

Read and write

<x-switch disabled />

Fieldset

Group related switches within a fieldset.

Email notifications

Communication emails

Receive emails about your account activity.

Marketing emails

Receive emails about new products, features, and more.

Social emails

Receive emails for friend requests, follows, and more.

Security emails

Receive emails about your account activity and security.

<x-fieldset>
    <x-legend>Email notifications</x-legend>
 
    <div class="space-y-4">
        <x-switch wire:model.live="communication" label="Communication emails"
            description="Receive emails about your account activity." />
 
        <x-separator variant="subtle" />
 
        <x-switch wire:model.live="marketing" label="Marketing emails"
            description="Receive emails about new products, features, and more." />
 
        <x-separator variant="subtle" />
 
        <x-switch wire:model.live="social" label="Social emails"
            description="Receive emails for friend requests, follows, and more." />
 
        <x-separator variant="subtle" />
 
        <x-switch wire:model.live="security" label="Security emails"
            description="Receive emails about your account activity and security." />
    </div>
</x-fieldset>