Action
Toggle
The toggle component is a user interface element that allows the user to switch between two states, such as on/off or open/closed, with a single click.
<x-toggle x-data/>
Installation
Make sure to include the required TALL kit plugin to enable the toggle functionality.
import {
toggle,
} from "@tall-kit/plugins"
Alpine.plugin(toggle)
Usage
Different sizes
<x-toggle x-data size="sm"/>
<x-toggle x-data size="md"/>
<x-toggle x-data size="lg"/>
With label and description
Quickly enable or disable the toggle component.
<x-toggle.group x-data class="flex items-center justify-between text-left">
<div>
<x-toggle.label>
Enable toggle
</x-toggle.label>
<x-toggle.description>
Quickly enable or disable the toggle component.
</x-toggle.description>
</div>
<x-toggle color="success"/>
</x-toggle.group>
Different toggle color schemes
<x-toggle x-data color="primary" checked/>
<x-toggle x-data color="secondary" checked/>
<x-toggle x-data color="neutral" checked/>
<x-toggle x-data color="success" checked/>
<x-toggle x-data color="warning" checked/>
<x-toggle x-data color="error" checked/>
With Livewire and Alpine.js model
<div wire:ignore
x-data="{
active: @entangle('active')
}"
class="flex justify-center items-center space-x-2"
>
<x-toggle x-model="active"/>
<span x-text="active"></span>
</div>