Skip to content

Overview

The <x-aura::toggle> component renders a switch-style toggle control used for binary on/off settings. It is built on a hidden checkbox input, making it fully compatible with standard form submissions and Livewire wire:model binding. The toggle supports multiple sizes, color variants, and an optional label with description text.

Basic Usage

<x-aura::toggle label="Enable notifications" name="notifications" />

Props

Prop Type Default Description
label string|null null Text label displayed next to the toggle.
description string|null null Additional descriptive text shown below the label.
size string 'md' Size of the toggle switch. Options: sm, md, lg.
color string 'primary' Color applied when the toggle is in the "on" state. Options: primary, secondary, success, danger.
disabled bool false Disables the toggle, preventing interaction.

Variants / Examples

Size Variants

<x-aura::toggle label="Small" size="sm" />
<x-aura::toggle label="Medium (default)" size="md" />
<x-aura::toggle label="Large" size="lg" />

Color Variants

<x-aura::toggle label="Primary" color="primary" checked />
<x-aura::toggle label="Secondary" color="secondary" checked />
<x-aura::toggle label="Success" color="success" checked />
<x-aura::toggle label="Danger" color="danger" checked />

With Livewire Binding

<x-aura::toggle
    label="Dark Mode"
    description="Enable dark mode across the application."
    wire:model.live="darkMode"
/>

Settings Page

<div class="space-y-6">
    <x-aura::toggle
        label="Email Notifications"
        description="Receive email updates about your account activity."
        wire:model="emailNotifications"
    />
    <x-aura::toggle
        label="SMS Alerts"
        description="Get text messages for critical events."
        wire:model="smsAlerts"
    />
    <x-aura::toggle
        label="Marketing Emails"
        description="Receive promotional offers and newsletters."
        wire:model="marketingEmails"
    />
    <x-aura::toggle
        label="Two-Factor Authentication"
        description="Add an extra layer of security to your account."
        wire:model="twoFactorAuth"
        color="success"
    />
</div>

Disabled State

<x-aura::toggle
    label="Admin Access"
    description="This setting is managed by your organization."
    :disabled="true"
    checked
/>

Form Submission

<form method="POST" action="/settings">
    @csrf
    <div class="space-y-4">
        <x-aura::toggle
            label="Accept Terms"
            name="accept_terms"
            color="success"
        />
        <x-aura::button type="submit">Save Settings</x-aura::button>
    </div>
</form>

Live Demo

Current State:
Email: ON SMS: OFF Marketing: OFF Dark Mode: ON 2FA: OFF

Accessibility

  • The toggle is built on a native <input type="checkbox">, ensuring full keyboard support (Space key to toggle) and form compatibility.
  • The entire component is wrapped in a <label> element, so clicking the label text or the visual switch toggles the state.
  • Disabled toggles include aria-disabled="true" on the wrapping label for assistive technologies, and the native disabled attribute on the input prevents interaction.
  • The visual toggle knob provides a clear on/off state indication through position and color change, benefiting users who rely on visual cues.