Toggle Component

The Toggle component provides a switch-style input with customizable sizes, label positions, and full Livewire support.

Usage

Create a simple toggle with a label:

<x-toggle label="Enable notifications" />

Sizes

The toggle component supports four sizes: sm, md, lg, and xl:

<x-toggle size="sm" label="Small" />
<x-toggle size="md" label="Medium" />
<x-toggle size="lg" label="Large" />
<x-toggle size="xl" label="Extra Large" />

Label Position

Position the label on the left, right, or hide it completely:

<x-toggle label="Label on right" labelPosition="right" />
<x-toggle label="Label on left" labelPosition="left" />
<x-toggle label="Hidden label" labelPosition="none" />

States

Control the toggle's checked and disabled states:

<x-toggle label="Checked" :checked="true" />
<x-toggle label="Disabled" :disabled="true" />
<x-toggle label="Checked & Disabled" :checked="true" :disabled="true" />

Container Style

Use withContainer to wrap the toggle in a styled container:

<x-toggle label="With container" :withContainer="true" />

Livewire Integration

Use with Livewire for reactive state management:

<x-toggle 
    label="Enable notifications" 
    wire:model.live="notifications"
/>

use Livewire\Component;
use Illuminate\View\View;

class Settings extends Component
{
    public bool $notifications = false;

    public function render(): View
    {
        return view('livewire.settings');
    }
}

Props

Prop	Type	Default	Description
id	string|null	null	Unique identifier. Auto-generated if not provided
label	string|null	null	Toggle label text
labelPosition	string	'right'	Label position: right, left, or none
size	string	'md'	Toggle size: sm, md, lg, or xl
checked	bool|null	null	Whether the toggle is checked
disabled	bool|null	null	Whether the toggle is disabled
ariaLabel	string|null	null	ARIA label for accessibility. Auto-set when labelPosition="none"
withContainer	bool	false	Whether to wrap the toggle in a styled container

References

Category	Path / Name	Description
Component	resources/views/components/toggle.blade.php	Toggle component file

For the detailed documentation, please visit the Penguin UI Toggles.