Umschaltfläche

A toggle button is a control used for switching (or toggling) between two states or options.

Example

<label>
    <woltlab-core-toggle-button name="foo" checked></woltlab-core-toggle-button>
    Toggle Button Description ...
</label>

Parameters

checked

Indicates that the button is active.

name

The name of the button.

If the button is part of a form, the name is used to transmit the value when the form is sent.

value

The value that should be transmitted when the form is sent if the button is active.

Defaults to 1.

Events

change

The custom event change is fired on the toggle button whenever the checked property of the button changes.

The event detail contains { checked: boolean }, alternatively the property checked can be queried to fetch the current state.

Example:

document.getElementId("toggle-button-id").addEventListener("change", (event: CustomEvent) => {
  if (event.detail.checked) {
    // button is checked
  }
});