Toggle

<x-bt-toggle />

A toggle switch (checkbox alternative) with label support, colors, sizes, label positioning, rich label content via slots, validation errors, help text, and built-in autosave support.
Customize via presets →

Basic Usage

A simple toggle with a label on the right (default position).

Enable notifications

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

Label Position

Control where the label appears relative to the toggle using the label-position prop.

Right (default)

Left side

Top

Bottom

1<x-bt-toggle label="Right (default)" />
2<x-bt-toggle label="Left side" label-position="left" />
3<x-bt-toggle label="Top" label-position="top" />
4<x-bt-toggle label="Bottom" label-position="bottom" />

Rich Label (Slot)

The default slot overrides the label prop, letting you render rich HTML content like links.

I accept the Terms of Service

1<x-bt-toggle name="tos">
2    I accept the <a href="#" class="underline text-blue-600">Terms of Service</a>
3</x-bt-toggle>

Colors

Colors affect the checked track background, hover state, focus ring, and active state. The thumb is always white.

Default (beartropy)

Blue

Red

Green

Purple

Orange

1<x-bt-toggle label="Default (beartropy)" checked />
2<x-bt-toggle blue label="Blue" checked />
3<x-bt-toggle red label="Red" checked />
4<x-bt-toggle green label="Green" checked />
5<x-bt-toggle purple label="Purple" checked />
6<x-bt-toggle orange label="Orange" checked />

All available colors

primary, beartropy, red, blue, green, yellow, purple, pink, gray, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, rose, fuchsia, slate, stone, zinc, neutral. Use the color prop or magic attributes: <x-bt-toggle blue />.

Sizes

Extra Small

Small

Medium (default)

Large

Extra Large

1<x-bt-toggle xs label="Extra Small" checked />
2<x-bt-toggle sm label="Small" checked />
3<x-bt-toggle label="Medium (default)" checked />
4<x-bt-toggle lg label="Large" checked />
5<x-bt-toggle xl label="Extra Large" checked />

Checked State

Use the checked HTML attribute to set the initial state.

Unchecked

Checked

1<x-bt-toggle label="Unchecked" />
2<x-bt-toggle label="Checked" checked />

Disabled

Disabled toggles get opacity-60 and cursor-not-allowed styling.

Disabled off

Disabled on

1<x-bt-toggle label="Disabled off" :disabled="true" />
2<x-bt-toggle label="Disabled on" :disabled="true" checked />

Validation Errors

Errors are automatically detected from the Laravel validation error bag using the wire:model name. When in error state, the track gets a red ring and an error message appears below.

Auto Validation

Submit without enabling the toggle to see the validation error.

Accept Terms

1<x-bt-toggle id="toggle-terms" wire:model="acceptedTerms" label="Accept Terms" />
2<x-bt-button wire:click="submitTerms" solid blue class="mt-3">Submit</x-bt-button>

Custom Error

Force an error state regardless of validation using custom-error.

You must accept the terms.

1<x-bt-toggle label="Accept" :custom-error="'You must accept the terms.'" />

Help Text

help and hint are aliases. help takes precedence.

Notifications

You will receive email notifications.

Public profile

Your profile will be visible to everyone.

1<x-bt-toggle label="Notifications" help="You will receive email notifications." />
2<x-bt-toggle label="Public profile" hint="Your profile will be visible to everyone." />

Livewire Integration

Deferred Binding

Enabled

1<x-bt-toggle id="toggle-enabled" wire:model="enabled" label="Enabled" />

Live Binding

Use wire:model.live to update the Livewire property immediately on toggle.

Dark mode

Dark mode: on

1<x-bt-toggle id="toggle-dark-mode" wire:model.live="darkMode" label="Dark mode" />
2<p class="text-sm text-gray-500 mt-2">Dark mode: <strong>{{ $darkMode ? 'on' : 'off' }}</strong></p>

Autosave

The toggle has built-in autosave support that calls a Livewire method on every change. A spinner appears while saving, a green checkmark on success, and a red X on error.

Requires wire:model. The toggle border transitions: dotted gray (saving), solid green (saved), solid red (error).

Notifications

1<x-bt-toggle
2    id="toggle-notifications"
3    label="Notifications"
4    wire:model="notifications"
5    :autosave="true"
6    autosave-method="savePreference"
7    autosave-key="notifications"
8/>

Livewire Component

1public bool $notifications = true;
2 
3public function savePreference($value, $key): void
4{
5    $this->toast()->success("Saved {$key} as " . ($value ? 'true' : 'false'));
6}

Real-World Example

A notification preferences panel combining multiple toggles.

Notification Settings

Email notifications

Receive updates via email.

Push notifications

Receive push alerts on your device.

Marketing emails

Get promotional content and offers.

Weekly digest

Summary of activity sent every Monday.

1<div class="max-w-md space-y-4 rounded-lg border border-gray-200 p-5 dark:border-gray-700">
2    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Notification Settings</h3>
3    <x-bt-toggle label="Email notifications" help="Receive updates via email." checked blue />
4    <x-bt-toggle label="Push notifications" help="Receive push alerts on your device." blue />
5    <x-bt-toggle label="Marketing emails" help="Get promotional content and offers." blue />
6    <x-bt-toggle label="Weekly digest" help="Summary of activity sent every Monday." checked blue />
7</div>

Slot	Description
`default`	Label content override. Takes precedence over the `label` prop. Supports rich HTML like links.

Prop	Type	Default	Description
`name`	`string\|null`	`null`	Input name attribute for form submission.
`label`	`string\|null`	`null`	Label text. Overridden by the default slot if provided.
`labelPosition`	`string\|null`	`right`	Label placement: `top`, `bottom`, `left`, `right`.
`color`	`string\|null`	`config default`	Color preset name. Supports magic attributes: `<x-bt-toggle blue />`.
`size`	`string\|null`	`md`	Size preset: `xs`, `sm`, `md`, `lg`, `xl`.
`disabled`	`bool`	`false`	Disables the toggle. Applies `opacity-60` and `cursor-not-allowed` styling.
`customError`	`mixed`	`null`	Custom error message that bypasses the validation bag. Forces the error state with red ring and label.
`help`	`string\|null`	`null`	Help text displayed below the toggle. Takes precedence over `hint`.
`hint`	`string\|null`	`null`	Alias for `help`.

AUTOSAVE PROPS

Auto-save toggle state on change via Livewire. Requires wire:model.

Prop	Type	Default	Description
`autosave`	`bool`	`false`	Enable autosave mode. When toggled, calls the specified Livewire method.
`autosaveMethod`	`string`	`savePreference`	Livewire method to call. Signature: `method($value, $key)` where `$value` is boolean.
`autosaveKey`	`string\|null`	`wire:model name`	Key passed to the autosave method. Defaults to the `wire:model` property name.
`autosaveDebounce`	`int`	`300`	Debounce delay in milliseconds before triggering the autosave call.

Code highlighting provided by Torchlight

Current version: 1.0.7