a-toggle

Lit

Default Yes No

True Yes No

False Yes No

ToggleElement

A toggle is a button that can be toggled between two states. Also integrates into forms well. Used for checkboxes, switches and toggle buttons.

Example

---

<a-toggle
  class="m-1 p-2 leading-none cursor-pointer border hover:border-zinc-600 border-zinc-700 bg-zinc-800 focus:ring-4 [&[value='true']]:bg-zinc-700"
  name="true"
  value="true"
>
  <span slot="true">Yes</span>
  <span slot="false">No</span>
</a-toggle>

Attributes

---

Name	Type	Default value	Description
name	string	undefined	FormData name of the field.
value	string | boolean	"false"	The value of the field, which is submitted with the form data.

Events

---

Name	Description
change	When value changed.
input	When value changed.

Methods

---

Show ↴ ↶

ToggleElement.toggle()

src/Toggle.ts:92

Toggles the value.