Switch
1.0.0
Install or Update
wp celeste pull component Switch
Dependencies will automatically be installed.
Properties
| Prop | Description |
|---|---|
name |
Input name |
id |
Unique ID, if not set, name will be used as the ID. |
checked |
Whether the default state is checked or not, true or false |
Events
| Event | Description |
|---|---|
toggle-change |
Fires when the checked state changes, use $event.detail.checked to get the value |
How to use it
<div x-data="{ isChecked: false }" @toggle-change="isChecked = $event.detail.checked" class="flex items-center gap-sm">
<label for="notifications">Enable Notifications</label>
<Switch name="notifications" />
<span x-text="isChecked ? 'Enabled' : 'Disabled'"></span>
</div>