Toggle a setting on or off. Suitable for binary options like enabling or disabling features.
<flux:switch wire:model.live="notifications" label="Enable notifications" />Group related switches within a fieldset.
<flux:fieldset> <flux:legend>Email notifications</flux:legend> <div class="space-y-4"> <flux:switch wire:model.live="communication" label="Communication emails" description="Receive emails about your account activity." /> <flux:separator variant="subtle" /> <flux:switch wire:model.live="marketing" label="Marketing emails" description="Receive emails about new products, features, and more." /> <flux:separator variant="subtle" /> <flux:switch wire:model.live="social" label="Social emails" description="Receive emails for friend requests, follows, and more." /> <flux:separator variant="subtle" /> <flux:switch wire:model.live="security" label="Security emails" description="Receive emails about your account activity and security." /> </div></flux:fieldset>Left align switches for more compact layouts.
<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>