Switch
A switch that turns a setting on and off with a single click. Under the hood it is a checkbox with role="switch"; used for on/off settings that take effect immediately.
Basic usage
Give the text with label or by writing it inside the component; clicking the text also toggles the switch. Add checked to start it on.
<acun:switch name="sw_notifications" label="Order notifications" checked />
<acun:switch name="sw_newsletter">Email newsletter</acun:switch>| Prop | Values |
|---|---|
label | Text next to the switch |
checked | Starts it on |
Description
description adds a muted description below the label. Use it to explain in one sentence what the setting does.
<acun:switch name="desc_sms" label="SMS notification" description="An SMS is sent to the customer when an order ships." checked />
<acun:switch name="desc_2fa" label="Two-step verification" description="Team members confirm every sign-in with an SMS code." />| Prop | Values |
|---|---|
description | Description below the label |
Sizes
There are two sizes, chosen with size; if omitted, md is used. sm suits tight spots such as a table row.
<acun:switch name="size_sm" size="sm" label="Small" checked />
<acun:switch name="size_md" label="Medium" checked />| Prop | Values |
|---|---|
size | sm | md |
Disabled
The disabled attribute locks the switch and dims it; it can be used in the on or the off state.
<acun:switch name="disabled_on" label="Automatic backup (enabled by an administrator)" checked disabled />
<acun:switch name="disabled_off" label="Bulk SMS (package required)" disabled />| Prop | Values |
|---|---|
disabled | Cannot be changed and looks dimmed |
Value and Livewire
The value submitted when on is 1 by default; when off, nothing is submitted in a classic form. Bind it to a boolean property with wire:model; for switches bound to the same array, give each a different value.
<acun:switch wire:model.live="notificationsOn" label="Order notifications" />
@foreach (['sms' => 'SMS', 'email' => 'Email'] as $channel => $name)
<acun:switch wire:model="channels" :value="$channel" :label="$name" />
@endforeach| Prop | Values |
|---|---|
value | Value submitted when on (1) |
wire:model | Boolean or array property |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | null | Text next to the switch; otherwise the slot content |
description | null | Description below the label |
name | null | Field name; otherwise the wire:model value |
checked | false | Starts it on |
size | md | sm · md |
value | 1 | Value submitted when on (attribute) |