Toggle

A switch/toggle component for Laravel applications. Perfect for boolean settings and on/off states. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/toggle

Livewire Usage

Basic Usage

<livewire:sb-toggle wire:model="notifications" />

With Label

<livewire:sb-toggle wire:model="darkMode" label="Enable Dark Mode" />

Different Sizes

<livewire:sb-toggle wire:model="setting" size="sm" />
<livewire:sb-toggle wire:model="setting" size="md" />
<livewire:sb-toggle wire:model="setting" size="lg" />

Disabled State

<livewire:sb-toggle wire:model="locked" :disabled="true" />

Livewire Props

Vue 3 Usage

Setup

import { SbToggle } from './vendor/sb-toggle';
app.component('SbToggle', SbToggle);

Basic Usage

<template>
  <SbToggle v-model="enabled" />
</template>

<script setup>
import { ref } from 'vue';
const enabled = ref(false);
</script>

With Label

<template>
  <SbToggle v-model="notifications" label="Enable Notifications" />
</template>

Sizes

<template>
  <SbToggle v-model="value" size="sm" label="Small" />
  <SbToggle v-model="value" size="md" label="Medium" />
  <SbToggle v-model="value" size="lg" label="Large" />
</template>

In a Form

<template>
  <form @submit.prevent="save">
    <div class="space-y-4">
      <SbToggle v-model="settings.darkMode" label="Dark Mode" />
      <SbToggle v-model="settings.notifications" label="Push Notifications" />
      <SbToggle v-model="settings.marketing" label="Marketing Emails" />
    </div>
    <button type="submit">Save Settings</button>
  </form>
</template>

Vue Props

Events

Sizes Reference

Accessibility

• role="switch" attribute
• aria-checked reflects state
• Focus ring for keyboard navigation
• Keyboard support (Enter/Space)

Styling

Uses Tailwind CSS:

• Blue background when on
• Gray background when off
• White thumb with shadow
• Smooth transition animation

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License