Fluxtor

#Introduction

The Switch component is a flexible toggle control that provides an intuitive way for users to switch between two states (on/off, enabled/disabled, etc.). It's designed with accessibility in mind and supports various sizes, alignments, and styling options. Perfect for settings panels, forms, and any interface where binary choices need to be made.

#Installation

Use the fluxtor artisan command to install the switch component easily:

php artisan fluxtor:install switch

Once installed, you can use the <x-ui.switch /> component in any Blade view.

#Usage

#Basic Switch

A simple switch with a label, perfect for most use cases.

<x-ui.switch 
    label="Enable notifications"
    name="notifications"
/>

#Switch with Description

Add additional context with a description to help users understand the toggle's purpose.

<x-ui.switch 
    label="Dark mode"
    description="Switch between light and dark themes"
    name="dark_mode"
    :checked="true"
/>

#Different Sizes

The switch component supports three sizes: small, medium (default), and large.

<x-ui.switch 
    label="Small switch"
    size="sm"
    name="small_switch"
/>

<x-ui.switch 
    label="Medium switch"
    size="md"
    name="medium_switch"
/>

<x-ui.switch 
    label="Large switch"
    size="lg"
    name="large_switch"
/>

#Left-Aligned Switch

Position the switch on the left side of the label for different layouts.

<x-ui.switch 
    label="Push notifications"
    description="Receive notifications on your device"
    align="left"
    name="push_notifications"
    maxWidth="max-w-sm"
/>

#Disabled Switch

Show switches in a disabled state when they cannot be interacted with.

<x-ui.switch 
    label="Disabled setting"
    description="This setting cannot be changed"
    :disabled="true"
    name="disabled_setting"
/>

<x-ui.switch 
    label="Locked setting"
    description="This setting is permanently enabled"
    :disabled="true"
    :checked="true"
    name="locked_setting"
/>

#Switch Without Label

Use switches without labels when the context is clear or when building custom layouts.

<div class="flex items-center gap-3">
    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Auto-save</span>
    <x-ui.switch 
        name="autosave"
        :checked="true"
    />
</div>

#Switch with Icons

Add visual feedback to your switches by displaying different icons for on and off states. This enhances user experience by providing clear visual indicators of the current state.

<x-ui.switch 
    label="Sound effects"
    description="Play sound effects in the application"
    name="sound_effects"
    iconOff="speaker-x-mark"
    iconOn="speaker-wave"
/>

#Different Icon Examples

Various icon combinations for different use cases and contexts.

<x-ui.switch 
    label="Dark mode"
    name="dark_mode"
    iconOff="sun"
    iconOn="moon"
    size="lg"
/>


<x-ui.switch 
    label="Auto-save"
    name="autosave"
    iconOff="bookmark-slash"
    iconOn="bookmark"
    size="sm"
/>

#Custom Colors

Customize the switch and thumb colors using Tailwind CSS classes for different states. Perfect for matching your brand colors or creating themed switches.

<x-ui.switch 
    label="Success theme"
    description="Green themed switch for positive actions"
    name="success_switch"
    onClass="bg-green-500"
    offClass="bg-red-300 dark:bg-red-600"
    thumbOnClass="bg-white"
    thumbOffClass="bg-white"
    :checked="true"
/>

<x-ui.switch 
    label="Warning theme"
    description="Orange themed switch for caution actions"
    name="warning_switch"
    onClass="bg-orange-500"
    offClass="bg-gray-300 dark:bg-gray-600"
    thumbOnClass="bg-white"
    thumbOffClass="bg-gray-100"
/>

<x-ui.switch 
    label="Brand theme"
    description="Purple themed switch matching brand colors"
    name="brand_switch"
    onClass="bg-purple-600"
    offClass="bg-gray-200 dark:bg-gray-700"
    thumbOnClass="bg-white shadow-lg"
    thumbOffClass="bg-gray-50"
    :checked="true"
/>

<x-ui.switch 
    label="Danger theme"
    description="Red themed switch for critical actions"
    name="danger_switch"
    onClass="bg-red-500"
    offClass="bg-gray-300"
    thumbOnClass="bg-white"
    thumbOffClass="bg-red-100"
    iconOff="x-mark"
    iconOn="check"
/>

#Component Props Reference

#Switch Props

For advanced customization, you can override the component's CSS classes or extend the component file directly.