Logo
Neura
Back to Home

Switch

Switch component for toggling between on/off states, perfect for settings and preferences

Basic Usage

The most basic switch with a label: 
<neura::switch label="Enable notifications" name="notifications" />
<neura::switch label="Dark mode" name="dark_mode" />
<neura::switch label="Auto-save" name="auto_save" />

With Description

Add a description to provide more context:

Receive email updates about your account activity

Add an extra layer of security to your account

Allow others to view your profile information 

<neura::switch 
    label="Email notifications" 
    name="email_notifications"
    description="Receive email updates about your account activity"
/>

Sizes

Use different sizes with the size property: 
<neura::switch label="Small switch" size="sm" />
<neura::switch label="Medium switch" size="md" />
<neura::switch label="Large switch" size="lg" />

Label Alignment

Control label position with the align property: 
<neura::switch label="Label on the right" align="right" />
<neura::switch label="Label on the left" align="left" />

Checked by Default

Set the switch as enabled by default with checked="true": 
<neura::switch label="Already enabled" :checked="true" />
<neura::switch label="Disabled by default" :checked="false" />

With Icons

Add icons for on and off states: 
<neura::switch 
    label="Sound notifications" 
    icon-on="speaker-wave"
    icon-off="speaker-x-mark"
/>

Disabled State

Disable the switch with disabled="true": 
<neura::switch label="Disabled switch" :disabled="true" />
<neura::switch label="Disabled and checked" :disabled="true" :checked="true" />

With Livewire

Use x-model with @entangle to sync with Livewire:

Current state: Disabled

Current state: Disabled

Current state: Disabled 

<div x-data="{ emailNotifications: @entangle('emailNotifications').live }">
    <neura::switch 
        label="Email notifications" 
        x-model="emailNotifications"
    />
</div>

Use Cases

Settings Panel

Notification Settings

Receive notifications via email

Receive push notifications on your device

Receive notifications via SMS

Feature Toggles

Feature Flags

Enable access to experimental features

Allow us to collect usage analytics

Switch to dark theme

Best Practices

Do

  • Use clear and descriptive labels
  • Add descriptions for important actions
  • Use x-model with @entangle to sync with Livewire
  • Choose the appropriate size based on context
  • Use icons to improve visual understanding

Don't

  • Don't use a switch for multiple choices (use checkbox)
  • Don't use a switch for actions that require confirmation
  • Don't create labels that are too long
  • Don't forget to handle disabled state for unavailable actions
  • Don't use too many switches in a single list

Properties

Property Type Default Description
label string '' Label displayed next to the switch
name string|null auto Field name (automatically detected from wire:model or x-model)
description string|null null Description displayed below the label
checked bool false Initial switch state (enabled or disabled)
disabled bool false Disable the switch
size string 'md' Switch size: 'sm', 'md', 'lg'
align string 'right' Label position: 'left' or 'right'
iconOn string|null null Icon name to display when switch is enabled
iconOff string|null null Icon name to display when switch is disabled
maxWidth string 'max-w-md' Maximum width of wrapper
switchClass string '' Custom CSS classes for the switch
thumbClass string '' Custom CSS classes for the thumb (internal button)
onClass string '' Custom CSS classes for enabled state
offClass string '' Custom CSS classes for disabled state
thumbOnClass string '' Custom CSS classes for thumb in enabled state
thumbOffClass string '' Custom CSS classes for thumb in disabled state