Switch

Toggle a setting on or off. Suitable for binary options like enabling or disabling features.

Use switches as auto-saving controls outside forms; checkboxes otherwise.

Enable notifications

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.

Left aligned

Left align switches for more compact layouts.

Email notifications

Communication emails

Marketing emails

Social emails

Security emails

<flux:fieldset>
    <flux:legend>Email notifications</flux:legend>

<div class="space-y-3">
        <flux:field variant="inline" class="w-full flex justify-between">
            <flux:switch wire:model.live="email" />
            <flux:label>Communication emails</flux:label>
            <flux:error name="email" />
        </flux:field>

<flux:field variant="inline" class="w-full flex justify-between">
            <flux:switch wire:model.live="marketing" />
            <flux:label>Marketing emails</flux:label>
            <flux:error name="marketing" />
        </flux:field>

<flux:field variant="inline" class="w-full flex justify-between">
            <flux:switch wire:model.live="social" />
            <flux:label>Social emails</flux:label>
            <flux:error name="social" />
        </flux:field>

<flux:field variant="inline" class="w-full flex justify-between">
            <flux:switch wire:model.live="security" />
            <flux:label>Security emails</flux:label>
            <flux:error name="security" />
        </flux:field>
    </div>
</flux:fieldset>

Built with by
Caleb Porzio and Hugo Sainte-Marie