Logo Beartropy UI
Toggle
The x-bt-toggle component is a modern, accessible switch.
It supports different label positions, full Livewire integration,
and an optional autosave mode that calls a Livewire method every time the value changes.

Basic Usage

A simple toggle with a label on the right (default).
The toggle uses color and size presets from the toggle preset group. 

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

Label Positions

You can display the label on the left, right, top, or bottom of the toggle.
Use the label-position prop to control the layout. 

 1<div class="space-y-3">
 2    <x-bt-toggle
 3        label="Label on the left"
 4        label-position="left"
 5    />
 6 
 7    <x-bt-toggle
 8        label="Label on the right (default)"
 9        label-position="right"
10    />
11 
12    <x-bt-toggle
13        label="Label on top"
14        label-position="top"
15    />
16 
17    <x-bt-toggle
18        label="Label on bottom"
19        label-position="bottom"
20    />
21</div>

Autosave with Livewire

The toggle can automatically call a Livewire method every time its value changes.
This is ideal for user preferences (dark mode, notifications, layout options, etc.).

How autosave works:

  • Requires a wire:model binding on the toggle.
  • On every change, after an optional debounce, it calls $wire.call(method, value, key).
  • autosave-key lets you reuse the same method for many toggles.
  • The container shows a dotted border while saving, green border + check on success, and red border + X on error.

1<x-bt-toggle
2    label="Dark mode"
3    wire:model.live="darkMode"
4    :autosave="true"
5    autosave-method="savePreference"
6    autosave-key="darkMode"
7/>

Livewire Component Method 

1public function savePreference($value, $key): void
2{
3    $this->toast()->success("Key {$key} saved with value ". ($value ? 'true' : 'false'));
4}

Props

Prop Type Default Description
label
string|null null
Optional text label for the toggle. If the slot is provided, it takes precedence over this prop.
labelPosition
string right
Controls where the label is displayed relative to the switch.
Accepted values: left, right, top, bottom.
name
string|null null
Optional name attribute for the underlying checkbox input.
color
string|null null
Color preset key for the toggle, resolved via the toggle presets.
Controls track background, thumb color, focus states, etc.
size
string|null null
Size preset key, mapped via the toggle size presets.
Controls track width/height and thumb size.
disabled
bool false
Disables the toggle. When true, the toggle cannot be changed and disabled styles are applied.
customError
string|null null
Custom error message that forces the error state independent of validation.
When set, the border/focus colors use the error variant and the message is displayed below.
hint
string|null null
Optional hint text shown below the toggle via the field-help component.
help
string|null null
Alias/companion for hint/help messaging depending on your conventions.
autosave
bool false
Enables autosave mode when used with wire:model.
When the toggle changes, the component calls the Livewire method defined in autosave-method with the current boolean value and the autosave-key.
autosaveMethod
string savePreference
Name of the Livewire method to call when autosave is enabled.
Signature: public function methodName($value, $key).
autosaveKey
string|null wire:model name
Logical key identifying what is being saved (e.g. darkMode, notifications).
Defaults to the bound wire:model property name when not provided.
autosaveDebounce
int 300
Debounce time in milliseconds before triggering the autosave call.
Useful to avoid sending too many calls when toggling on/off rapidly.
wire:model / wire:model.live
Livewire binding null
Binds the toggle state to a Livewire boolean property.
When autosave is enabled, this binding is required so that the component can call the autosave method with the current value.
slot
slot null
Optional slot that replaces the label text entirely.
Useful to render rich labels or inline links.
Code highlighting provided by Torchlight