Switch

WIP

2026.1

Requires Celeste 2026.1

This component is a work in progress, so it might not work as expected.

Receive Notifications

Switch state:

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

Alpine State

This component is compatable with Alpine’s x-model, so if you have some data to bind, you may pass it via the x-model attribute. For example if your component has a "toggleStatus" value, you can bind it to a Switch like this: x-model="toggleStatus".

How to use it

<div x-data="{ switchState: false }">
	<div class="flex items-center gap-2">
		<Switch name="notifications" x-model="switchState" />
		<label for="notifications">Receive Notifications</label>
	</div>
	<div class="mt-sm">
		<p>Switch state: <code x-text="switchState ? 'ON' : 'OFF'" x-bind:class="{ 'text-green-500': switchState, 'text-red-500': !switchState }"></code></p>
	</div>
</div>