tuix-checkbox

Komponenten werden geladen…

Zustände

Komponenten werden geladen…

error wird ignoriert, solange die Box disabled ist.

Komponenten werden geladen…

Der Default-Slot ersetzt den Text aus label; er ist die richtige Wahl, wenn das Label einen Link oder zusätzliche Auszeichnung enthält.

Komponenten werden geladen…

Komponenten werden geladen…

checkbox.addEventListener('change', (event) => {
    console.log(event.detail.value, event.detail.label)
})

Property	Attribut	Typ	Standard	Beschreibung
`checked`	`checked`	`boolean`	`false`	Angehakt oder nicht
`label`	`label`	`string`	`''`	Labeltext, gesetzt mit `TextSize.FieldPlaceholder`
`labelSide`	`labelside`	`CheckboxLabelSide`	`right`	`left` oder `right`
`disabled`	`disabled`	`boolean`	`false`	Blockiert die Interaktion
`error`	`error`	`boolean`	`false`	Rote Box und rotes Label. Ignoriert, solange disabled
`dark`	`dark`	`boolean`	`false`	Dunkle Palette

Event	Detail	Wann
`change`	`{ value: boolean, label?: string }`	Der Nutzer schaltet die Box um

Typisiert als CustomEventTuixCheckbox mit einer DetailValueCheckbox-Nutzlast.

Slot	Inhalt
default	Ersetzt den Text aus `label`

Die ganze Zeile ist ein <label>, ein Klick auf den Text schaltet die Box also um.
checked wird nicht auf das Attribut gespiegelt: es wird als Property gelesen.
Wie das Input besitzt die Komponente ihren Zustand nicht; checked wird aus dem change-Handler zurückgeschrieben.