x-toggle
An animated switch control for boolean settings, with label, description, and three sizes. Works with wire:model. Announced as a switch (role="switch" on the underlying checkbox) to assistive technology.
Three sizes, with label and description.
<div class="flex w-full max-w-md flex-col gap-4">
<x-components.toggle label="Public profile" description="Anyone can view your page." checked />
<x-components.toggle label="Two-factor auth" size="sm" />
<x-components.toggle label="Large switch" size="lg" checked />
</div>
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
text |
—
|
Label text shown next to the toggle. |
description
|
text |
—
|
Secondary helper text under the label. |
checked
|
boolean |
false
|
Whether the toggle starts on. |
disabled
|
boolean |
false
|
Disable the toggle. |
size
|
select sm · md · lg |
md
|
The size of the switch. |