Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Switch

Toggle switch for boolean on/off state. Identical API to checkbox, with role="switch" set automatically on the underlying <input>.

Basic usage

Pass the label as a prop. Use the default slot instead when it contains HTML.

Enable notifications

Receive marketing emails

<x-wirestrap::switch
    wire:model="notifications"
    label="Enable notifications"
/>

{{-- Rich label via default slot --}}
<x-wirestrap::switch ... >
    Receive <a href="/privacy">marketing emails</a>
</x-wirestrap::switch>

Layout

Add inline to display switches side by side, or reverse to place the switch on the right of the label.

Emails

SMS

Push

<x-wirestrap::switch ... inline />
<x-wirestrap::switch ... inline />
<x-wirestrap::switch ... inline />

Dark mode

<x-wirestrap::switch ... reverse />

Disabled

Off

On

<x-wirestrap::switch ... disabled />

Validation

When wire:model is bound, the switch checks $errors for a matching key and applies the invalid style and message if found. Try submitting without enabling the switch below.

Enable notifications

{{-- Suppress both the invalid class and the error message --}}
<x-wirestrap::switch ... :has-validation="false" />

{{-- Keep the invalid class, hide the error message --}}
<x-wirestrap::switch ... :has-validation-message="false" />

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::switch

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Switch id. Auto-resolved from wire:model, with value appended when set.
`label`	`ComponentSlot\|string\|null`	`null`	Label text or slot content. No label element is rendered when null.
`inline`	`bool`	`false`	Inline layout for side-by-side switches.
`reverse`	`bool`	`false`	Place the switch on the right of the label.
`disabled`	`bool`	`false`	Disable the switch.
`has-validation-message`	`bool`	`config`	Render the error message below the switch.
`has-validation`	`bool`	`config`	Apply the invalid class when the wire:model key has an error.
`default-attributes`	`array`	`config`	Default HTML attributes merged onto the input element.
No results found

⭐ GitHub