Logo Beartropy

Toggle

The x-toggle component is a modern, customizable switch/toggle.
Supports label positions, presets, error and hint states, and full Livewire support.
Combine any features for advanced UX.
You can customize this component

Basic Usage

The toggle component provides a clean and accessible switch UI.
Useful for preferences, feature toggles, or settings.
Fully compatible with forms and Livewire.
blade 
            
1<x-toggle
2    name="newsletter"
3    label="Subscribe to newsletter"
4/>

Label Position

Control label placement with label-position prop.
Options: top, bottom, left, right (default: right).
All positions are fully accessible and clickable.
blade 
            
1<x-toggle label="Top label" label-position="top" />
2<x-toggle label="Bottom label" label-position="bottom" />
3<x-toggle label="Left label" label-position="left" />
4<x-toggle label="Right label" label-position="right" />

Livewire Support

Full wire:model support.
The value is synced automatically as true or false.
Just add wire:model="property".
blade 
            
1<x-toggle
2    wire:model="activo"
3    label="Active status"
4/>

Disabled State

Use :disabled="true" to disable the toggle.
blade 
            
1<x-toggle
2    label="Disabled toggle"
3    :disabled="true"
4/>

Error & Hint

Display error and hint messages using error and hint props.
Error states are styled via your presets.

Required to continue.

blade 
            
1<x-toggle
2    name="terms"
3    label="Accept terms"
4    :error="'You must accept the terms.'"
5    hint="Required to continue."
6/>

Presets

Presets available out of the box.
Switch style changes with the color prop: blue, red, etc.
Uses your theme's color system.
blade 
            
 1<x-toggle label="Beartropy" />
 2<x-toggle blue label="Blue" />
 3<x-toggle red label="Red" />
 4<x-toggle violet label="Violet" />
 5<x-toggle rose label="Rose" />
 6<x-toggle label="xs" xs />
 7<x-toggle label="sm" sm />
 8<x-toggle label="md" md />
 9<x-toggle label="lg" lg />
10<x-toggle label="xl" xl />

Props

Table of props
Showing to of results

Tips

Usage Tips

  • Label Position: Use label-position for any UX (top, bottom, left, right).
  • Presets: Switches inherit colors from your theme presets.
  • Livewire: wire:model support for instant state sync.
  • Accessibility: The label is always clickable and accessible for screen readers.
  • Validation: Combine error and hint for best UX.
Code highlighting provided by Torchlight