Checkbox

Checkboxen ermöglichen es Benutzern, eine oder mehrere Optionen aus einer Gruppe von Optionen auszuwählen oder den Ein-/Aus-Zustand einer einzelnen Option umzuschalten.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/checkbox.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Checkbox } from 'mdui/components/checkbox.js';

Beispiel:

Checkbox

<mdui-checkbox>Checkbox</mdui-checkbox>

Über die Attribute unchecked-icon, checked-icon und indeterminate-icon können Sie die Material Icons-Symbole für die Zustände nicht ausgewählt, ausgewählt und unbestimmt festlegen. Sie können dies auch über die Slots unchecked-icon, checked-icon und indeterminate-icon tun.

Checkbox

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert die Checkbox.
`checked`	`checked`	`boolean`	`false`
Setzt die Checkbox in den aktivierten Zustand.
	`defaultChecked`	`boolean`	`false`
Setzt den standardmäßig aktivierten Zustand. Die Checkbox setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
`indeterminate`	`indeterminate`	`boolean`	`false`
Setzt die Checkbox in einen unbestimmten Zustand.
`required`	`required`	`boolean`	`false`
Die Checkbox muss aktiviert sein, um das Formular zu senden.
`form`	`form`	`string`	-
Verknüpft die Checkbox mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Checkbox ihr übergeordnetes `<form>`-Element, falls vorhanden. Dies ermöglicht es der Checkbox, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
`name`	`name`	`string`	`''`
Setzt den Namen der Checkbox, der mit Formulardaten übermittelt wird.
`value`	`value`	`string`	`'on'`
Setzt den Wert der Checkbox, der mit Formulardaten übermittelt wird.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Legt den Namen des Material Icons für den nicht aktivierten Zustand fest. Alternativ können Sie `slot="unchecked-icon"` verwenden.
`checked-icon`	`checkedIcon`	`string`	-
Legt den Namen des Material Icons für den aktivierten Zustand fest. Alternativ können Sie `slot="checked-icon"` verwenden.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Legt den Namen des Material Icons für den unbestimmten Zustand fest. Alternativ können Sie `slot="indeterminate-icon"` verwenden.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.

Methoden

Name	Parameter	Rückgabewert
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn die Checkbox den Fokus erhält.
`blur`
Wird ausgelöst, wenn die Checkbox den Fokus verliert.
`change`
Wird ausgelöst, wenn sich der aktivierte Zustand ändert.
`input`
Wird ausgelöst, wenn sich der aktivierte Zustand ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

Slots

Name
Standard
Text.
`unchecked-icon`
Icon für den nicht aktivierten Zustand.
`checked-icon`
Icon für den aktivierten Zustand.
`indeterminate-icon`
Icon für den unbestimmten Zustand.

CSS Parts

Name
`control`
Container für das linke Icon.
`unchecked-icon`
Icon für den nicht aktivierten Zustand.
`checked-icon`
Icon für den aktivierten Zustand.
`indeterminate-icon`
Icon für den unbestimmten Zustand.
`label`
Text.

Vorherige Seite

Card

Nächste Seite

Chip

Checkbox

Verwendung

Beispiele

Ausgewählter Zustand

Deaktivierter Zustand

Unbestimmter Zustand

Symbol

API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts